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;
}