使用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 相关文章推荐
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JavaScript如何操作css
Oct 24 Javascript
在vue中嵌入外部网站的实现
Nov 13 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 include_path设置技巧分享
2011/07/03 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
python树莓派红外反射传感器
2019/01/21 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
政风行风自查自纠报告
2014/10/21 职场文书
小学母亲节活动总结
2015/02/10 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL存储过程及语法详解
2022/08/05 MySQL