使用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 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
Vue动态实现评分效果
May 24 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
如何管理Vue中的缓存页面
Feb 06 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
简单的通用表达式求10乘阶示例
2014/03/03 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Django CBV类的用法详解
2019/07/26 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Android笔试题总结
2014/11/29 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
幼儿园小班评语
2014/04/18 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年食堂工作总结
2014/11/20 职场文书
亲属关系公证书样本
2015/01/23 职场文书
2015年党总支工作总结
2015/05/25 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript