使用React实现轮播效果组件示例代码
时间：2020-11-11 11:53:03 | 栏目：JavaScript代码 | 点击：次
前言
我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过React在componentDidMount后改变setState，来动态改变css样式。
说明以下：看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"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></li> <li className="boxStyleLi"></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这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。