使用React实现轮播效果组件示例代码

前言

我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在

Modal

componentDidMount

setState

说明以下：看gif很卡，但是实际效果还是很好的。

以下是示例代码

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'));

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;
}
.fourPosition{
left: -1200px;
}
.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;
}

总结

通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。

您可能感兴趣的文章:

• React中嵌套组件与被嵌套组件的通信过程
• react 父组件与子组件之间的值传递的方法
• 深入理解React中es6创建组件this的方法
• React组件的三种写法总结
• React 子组件向父组件传值的方法
• 详解react如何在组件中获取路由参数
• React如何利用相对于根目录进行引用组件详解
• React创建组件的三种方式及其区别
• React组件重构之嵌套+继承及高阶组件详解