使用React实现轮播效果组件示例代码
(编辑:jimmy 日期: 2024/11/19 浏览:3 次 )
前言
我发现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"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"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"boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg"boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg"boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg"color: #ff0000">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这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容,希望对大家的学习或者工作能带来一定的帮助,如果有疑问可以留言交流。
下一篇:Bootstrap中的fileinput 多图片上传及编辑功能