使用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应用之禁止抓屏、复制、打印
Feb 21 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
房产代理公证处委托书
2014/04/04 职场文书
企业宣传标语
2014/06/09 职场文书
竞聘自述材料
2014/08/25 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python