Using react to implement a carousel Effect component sample code _javascript tips

Objective

I've found that react and angularjs ideas are completely different, Angularjs are based on two-way binding,Modalcustomizing data in a layer, and then changing both directions. But react is changing the state of the view layer through prop and states. Here is a Carousel diagram component that I wrote, which can be viewed directly. The code is simple. The principle is to changecomponentDidMountsetStatethe CSS style dynamically through react.

Description: Look at the GIF is very card, but the actual effect is very good.

Here is the sample code

Lunbo.js

require('styles/App.css');
require('normalize.css/normalize.css');

import React from 'react';
import ReactDOM from 'react-dom'

const LunBo=React.createClass({
 propsTypes:{
 interval:React.PropTypes.number,
 autoPlay:React.PropTypes.bool,
 activeIndex:React.PropTypes.bool,
 defaultActiveIndex:React.PropTypes.bool,
 direction:React.PropTypes.oneOf['right','left'],
 number:React.PropTypes.number,
 boxStyle:React.PropTypes.string,
 },
 getDefaultProps(){
 return{
 interval:3000,
 autoPlay:true,
 defaultActiveIndex:0,
 direction:'right'
 }
 },
 getInitialState(){
 return{
 activeIndex:this.props.defaultActiveIndex?this.props.defaultActiveIndex:0,
 direction:this.props.direction?this.props.direction:'right'
 }
 },
 componentDidMount(){
 this.autoPlay();
 },
 componentWillReceiveProps (){

 },
 componentWillUnmount(){
 clearInterval(this.timeOuter);
 },
 autoPlay(){
 if(this.props.autoPlay){
 if(this.props.direction==="right"){
 this.timeOuter=setInterval(this.playRight,this.props.interval);
 }else if(this.props.direction==="left"){
 this.timeOuter=setInterval(this.playLeft,this.props.interval);
 }
 }
 },
 playRight(indexIn){
 let index=indexIn?indexIn:this.state.activeIndex+1;
 console.log(index);
 if(index>this.props.number-1){
 index=0;
 }
 this.setState({
 activeIndex:index
 })
 },
 playLeft(indexIn){
 let index=indexIn?indexIn:this.state.activeIndex-1;
 console.log(index);
 if(index<0){
 index=this.props.number-1;
 }
 this.setState({
 activeIndex:index
 })
 },
 position(){
 switch (this.state.activeIndex){
 case 0:return "onePosition" ;
 case 1:return "twoPosition" ;
 case 2:return "therePosition" ;
 case 3:return "fourPosition";
 }
 },
 left(){
 clearInterval(this.timeOuter);
 let oldIndex=this.props.activeIndex;
 this.playLeft(oldIndex+1);
 this.autoPlay();
 },
 right(){
 clearInterval(this.timeOuter);
 let oldIndex=this.props.activeIndex;
 this.playRight(oldIndex-1);
 this.autoPlay();
 },
 render(){
 let{
 interval,
 autoPlay,
 activeIndex,
 defaultActiveIndex,
 direction,
 number,
 boxStyle
 }=this.props;
 return <div className={boxStyle} >
 <span className="leftIcon" onClick={this.left}>left</span>
 <span className="rightIcon" onClick={this.right}>right</span>
 <ul className={this.position()}>
  {this.props.children}
 </ul>
 </div>
 }
});

export default LunBo;

index.js

 import ' core-js/fn/object/assign ', import react from ' react ', import reactdom from ' React-dom ';
Import Lunbo from './components/lunbo '; Reactdom.render (<lunbo interval={100} number={4} boxstyle= "content" interval={4000} > <li className= " Boxstyleli ">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240) </li> <li classname= "Boxstyleli" >! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240) </li> <li classname= "Boxstyleli" >! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240) </li> <li classname= "Boxstyleli" >! [] (http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240) </li></LunBo>, document.getElementById (' app ');
import 'core-js/fn/object/assign';import React from 'react';
import ReactDOM from 'react-dom';
import LunBo from './components/Lunbo';
ReactDOM.render(<LunBo interval={100} number={4} boxStyle="content" interval={4000} > <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li></LunBo> ,document.getElementById('app'));

app.css

. content{width:400px;
 height:400px;
 BORDER:3PX solid SaddleBrown;
 position:relative;
Overflow:hidden;
 }. Content ul{Display:block;
 width:2500px;
 height:100%;
 Float:left;
 Position:absolute;
 z-index:0;
 -webkit-transition:all 0.5s;
 -moz-transition:all 0.5s;
 -ms-transition:all 0.5s;
 -o-transition:all 0.5s;
Transition:all 0.5s;
 }. boxstyleli{Display:inline-block;
 width:400px;
 height:400px;
Float:left;
 }. Boxstyleli img{width:100%;
height:100%;
 }. spanstyle{width:500px;
 height:400px;
 BORDER:3PX solid #598b3a;
 Background: #7177eb;
position:relative; 
}. oneposition{left:0; twoposition{left: -400px}. thereposition{left: -800px;
 }. lefticon{width:50px;
 height:50px;
 Background: #cd4d5c;
 Position:absolute;
 left:0;
 top:350px;
 Text-align:center;
 line-height:50px;
z-index:999;
 }. righticon{width:50px;
 height:50px;
 Background: #f6403d;
 Position:absolute;
 left:350px; Top 350px;
 Text-align:center;
 line-height:50px;
z-index:999; }

Summarize

By react this framework of learning, you can explore a new mode of thinking from its unique new features. The above is the entire content of this article, I hope for everyone's study or work can bring certain help, if there are questions can be exchanged message.