React轮播图（下）

1
<div id="root"></div>

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import Slider from './components/Slider';
4
let images=[
5
    {src:require('./images/1.jpg')},
6
    {src:require('./images/2.jpg')},
7
    {src:require('./images/3.jpg')},
8
    {src:require('./images/4.jpg')}
9
];
10
ReactDOM.render(<Slider images={images}/>,document.querySelector('#root'));

1
module:{
2
        loaders:[
3
            {test:/\.js$/,loader:'babel-loader',exclude:/node_modules/},
4
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},
5
            {test:/\.(jpg|png|gif)$/,loader:'url-loader'}
6
        ]
7
    }

1
constructor(){
2
        super();
3
        this.state={pos:0};//默认索引
4
    }
5
    componentDidMount(){
6
        this.$timer=setInterval(()=>{
7
            let pos=this.state.pos;
8
            pos++;//每隔2s让pos加1，pos值影响ul的左偏移量left的值 所以ul应该有个style属性 left值应该变化
9
            this.setState({pos:pos})
10

11
        },this.props.interval*1000)

1
ReactDOM.render(
2
    <Slider
3
        images={images}//图片
4
        interval={2}//多长时间轮播一次
5
        speed={1}//每次轮播的速度
6
        pause={true}//当鼠标移动上去之后自动暂停
7
        autoplay={true}//是否启用自动轮播，false不自动轮播
8
                                  - 在Slider.js中
9
        dots={true}//是否有点状导航
10
        arrows={true}//是否有箭头导航
11
    />,document.querySelector('#root'));

1
let style={
2
    width:400*images.length,
3
    left:this.state.pos*-400,
4
    transitionDuration:this.props.speed+'s'
5
};

1
    componentDidMount(){
2
        if(this.props.autoPlay){
3
            this.$timer=setInterval(()=>{
4
                let pos=this.state.pos;
5
                pos++;
6
                this.setState({pos:pos})
7
            },this.props.interval*1000)
8
        }
9
    }

1
    turn(n){
2
        let pos=this.state.pos;
3
        pos+=n;
4
        this.setState({pos:pos})
5
    }

1
turn=(n)=>{
2
    let pos=this.state.pos;
3
    pos+=n;
4
    this.setState({pos:pos})
5
}

1
componentDidMount(){
2
    if(this.props.autoplay){
3
        this.timer=setInterval(()=>{
4
            this.turn(1);
5
        },this.props.interval*1000)
6
    }
7
}

1
<ul onMouseOver={()=>clearInterval(this.timer)} onMouseOut={this.play} style={style} className="sliders">
2
...
3
</ul>

1
play=()=>{
2
    this.timer=setInterval(()=>{
3
        this.turn(1);
4
    },this.props.interval*1000)
5
};

1
componentDidMount(){
2
    if(this.props.autoplay){
3
        this.play();
4
    }
5
}

1
turn=(n)=>{
2
        let pos=this.state.pos;
3
        pos+=n;
4
        if(pos>=this.props.images.length){
5
            pos=0;
6
        }
7
        this.setState({pos:pos})
8
    };

1
<div className="arrows">
2
    <span className="arrow-left">&lt;</span>
3
    <span className="arrow-right">&gt;</span>
4
</div>

1
<div className="arrows">
2
    <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
3
    <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
4
</div>

1
turn=(n)=>{
2
    let pos=this.state.pos;
3
    pos+=n;
4
    if(pos>=this.props.images.length){
5
        pos=0;
6
    }
7
    if(pos<0){
8
        pos=this.props.images.length-1;
9
    }
10
    this.setState({pos:pos})
11
};

1
{
2
    this.props.arrows?<div className="arrows">
3
        <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
4
        <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
5
    </div>:null
6
}

1
let arrows=null;
2
if(this.props.arrows){
3
    arrows=(
4
        <div className="arrows">
5
            <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
6
            <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
7
        </div>
8
    )
9
}

1
<div className="slider-wrapper">
2
    <ul onMouseOver={()=>clearInterval(this.timer)} onMouseOut={this.play} style={style} className="sliders">
3
        {
4
            images.map((image,index)=>(
5
                <li className="slider" key={index}>
6
                    <img src={image.src}/>
7
                </li>
8
            ))
9
        }
10
    </ul>
11
{arrows}
12
</div>

1
let dots=null;
2
    if(this.props.dots){
3
        dots=(
4
            <div className="dots">
5
                {
6
                    images.map((image,index)=>(
7
                        <span className="dot" key={index}></span>
8
                    ))
9
                }
10
            </div>
11
        )
12
    }

1
...
2
{arrows}
3
{dots}

1
···
2
<span className="dot" key={index} onClick={()=>this.turn(index-this.props.pos)}></span>
3
···