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

 更新时间:2016年09月05日 12:00:25   作者:MakingChoice   我要评论
React刚出来不久,组件还比较少,不像jquery那样已经有很多现成的插件了,于是自己写了一个基于React的轮播效果组件,现在分享给大家,有需要的可以参考借鉴。

前言

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

说明以下:看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 变量、作用域及内存

    这篇文章主要介绍了JavaScript 变量、作用域及内存,需要的朋友可以参考下
    2015-04-04
  • Bootstrap多级菜单的实现代码

    Bootstrap多级菜单的实现代码

    这篇文章主要介绍了Bootstrap多级菜单的简单实现代码,需要的朋友可以参考下
    2017-05-05
  • JS获得图片alt信息的方法

    JS获得图片alt信息的方法

    这篇文章主要介绍了JS获得图片alt信息的方法,涉及javascript获取图片元素及对应alt属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript Array扩展实现代码

    JavaScript Array扩展实现代码

    最近看了一下developer.mozilla.org里的东西,发现它为Array对象添加了不少generic method,赶得上Prototype的热心程度。
    2009-10-10
  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    这篇文章主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 微信小程序使用echarts获取数据并生成折线图

    微信小程序使用echarts获取数据并生成折线图

    这篇文章主要介绍了微信小程序使用echarts获取数据并生成折线图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • JsDom 编程小结

    JsDom 编程小结

    JsDom编程小结,需要进行dom操作的朋友可以参考下。
    2011-08-08
  • Webpack 4.x搭建react开发环境的方法步骤

    Webpack 4.x搭建react开发环境的方法步骤

    这篇文章主要介绍了Webpack 4.x搭建react开发环境的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript脚本性能的优化方法

    JavaScript脚本性能的优化方法

    JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能。
    2007-02-02
  • js实现返回顶部效果

    js实现返回顶部效果

    本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论