React 轮播图插件

文件目录：

src-|    |-Sliders-|              |-components-|                |            |-Sliders.js              |            |-SlidersArrows.js              |            |-SlidersDots.js               |            |-SlidersItem.js               |-css-|              |     |-Sliders.css              |              |-img-|              |     |-图片              |               |-index.js

引用插件文件设置：

import React,{Component} from 'react';import ReactDOM from 'react-dom';import Sliders from './components/Sliders';const Img=[    require('./img/1.gif'),    require('./img/2.gif'),    require('./img/3.jpg'),    require('./img/4.jpg'),]ReactDOM.render(    <Sliders        images={Img}        speed={1}        delay={2}        autoPlay={true}        autoParse={true}    />,document.querySelector('#root'));

js:

1、 Sliders.js

import React,{Component} from 'react';import '../css/Sliders.css';import SlidersItem from './SlidersItem';import SlidersArrows from './SlidersArrows';import SlidersDots from './SlidersDots';export default class Sliders extends Component{    constructor(){        super();        this.state={index:0}    }    componentDidMount(){        if(this.props.autoPlay){            this.go();        }    }    go=()=>{        this.timer=setInterval(()=>{            this.turn(1)        },this.props.delay*1000)    };    turn=(step)=>{        let index= this.state.index+step;        if(index>=this.props.images.length){            index=0;        }        if(index<0){            index=this.props.images.length-1;        }        this.setState({index:index})    };    render(){        return (            <div                className="wrapper"                onMouseOver={()=>clearInterval(this.timer)}                onMouseOut={this.go}            >                <SlidersItem                    images={this.props.images}                    speed={this.props.speed}                    index={this.state.index}                />                <SlidersArrows                    turn={this.turn}                />                <SlidersDots                    images={this.props.images}                    turn={this.turn}                    index={this.state.index}                />            </div>        )    }};

2、 SlidersItem.js

import React,{Component} from 'react';export default class SlidersItem extends Component{    render(){        let style={            width:this.props.images.length*500+'px',            left:this.props.index*-500+'px',            transitionDuration:this.props.speed+'s'        };        return (           <ul className="sliders" style={style}>               {                   this.props.images.map((item,index)=>(                       <li                           className="slider"                           key={index}                       >                           <img src={item} alt=""/>                       </li>                   ))               }           </ul>        )    }}

3、 SlidersArrows.js

import React,{Component} from 'react';export default class SlidersArrows extends Component{    render(){        return (            <div                className="arrows"            >                <span                    className="arrow arrow-left"                    onClick={()=>this.props.turn(-1)}                >                    &lt;                </span>                <span                    className="arrow arrow-right"                    onClick={()=>this.props.turn(1)}                >                    &gt;                </span>            </div>        )    }}

4、 SlidersDots.js

import React,{Component} from 'react';export default class SlidersDots extends Component{    render(){        return (            <div                className="dots"            >                {                    this.props.images.map((item,index)=>(                        <span                            key={index}                            className={"dot "+(index==this.props.index?'active':'')}                            onClick={()=>this.props.turn(index-this.props.index)}                        >                        </span>                    ))                }            </div>        )    }}

css：

*{    padding: 0;    margin: 0;}ul,li{    list-style: none;}.wrapper{    position: relative;    width: 500px;    margin: 30px auto;    height: 300px;    overflow: hidden;}.sliders{    position: absolute;    height: 300px;}.slider{    float: left;    width: 500px;    height: 300px;}.slider img{    width: 100%;    height: 100%;}.arrows{    position: absolute;    top: 50%;    height: 20px;    width: 100%;}.arrow{    position: absolute;    width: 20px;    height: 20px;    line-height: 20px;    text-align: center;    background: #ccc;    cursor: pointer;}.arrow-left{    left: 10px;}.arrow-right{    right:10px;}.dots{    position: absolute;    bottom: 10px;    width: 100%;    height: 20px;    line-height: 20px;    text-align: center;}.dot{    display: inline-block;    width: 20px;    height: 20px;    margin: 0 3px;    background-color: #ccc;}.dot.active{    background-color: deepskyblue;}