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


Posted in Javascript onSeptember 05, 2016

前言

我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal层中定制数据,然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件,可以直接看一下。代码很简单。原理就是通过React在componentDidMount后改变setState,来动态改变css样式。

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

说明以下:看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这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容,希望对大家的学习或者工作能带来一定的帮助,如果有疑问可以留言交流。

Javascript 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 #Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 #Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 #Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 #Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 #Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
You might like
php模拟登陆的实现方法分析
2015/01/09 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python实现两款计算器功能示例
2017/12/19 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python itertools.product方法代码实例
2020/03/27 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
公司总经理任命书
2014/06/05 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python