使用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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
js简单抽奖代码
Jan 16 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
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 保留字列表
2012/10/04 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python3调用windows dos命令的例子
2019/08/14 Python
用python制作个音乐下载器
2021/01/30 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
毕业论文评语大全
2014/04/29 职场文书
市场营销计划书
2015/01/17 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL