react輪播圖--學習

效果：

代碼：

import React, {Component} from 'react';
import  './ReactCarousel.css';
class ReactCarousel extends Component{
    constructor(){
        super();
        this.state = {
            imgs:[
                './images/1.png',
                './images/2.png',
                './images/3.png',
                './images/4.png',
                './images/5.png'
               ],   // 圖片數組
          showIndex: 0, //顯示第幾個圖片
          timer: null,  // 定時器
          show: false   // 先後按鈕顯示
        }
    }
    render(){
        return (
            <div className="ReactCarousel">
                <div className="contain" 
                     onMouseEnter={()=>{this.stop()}} //鼠標進入中止自動播放
                     onMouseLeave={()=>{this.start()}}  //鼠標退出自動播放
                >
                    <ul className="ul">
                        {
                            this.state.imgs.map((value, index) => {
                                return (
                                    <li className={index === this.state.showIndex ? 'show' : ''}
                                        key={index} 
                                    > 
                                        <img src={require(value + '')} alt="輪播圖" />
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <ul className="dots" style={{width: this.state.imgs.length * 20 + 'px'}}> 
                        {
                            this.state.imgs.map((value, index) => {
                                return (
                                    <li key={index}  
                                        className={index === this.state.showIndex ? 'active' : ''} 
                                        onClick={()=>{this.change(index)}}>
                                    </li>)
                            })
                        }
                        
                    </ul>
                    <div className="control">
                        <span className="left"  onClick={(e)=>{this.previous(e)}}>左</span>
                        <span className="right" onClick={(e)=>{this.next(e)}}>右</span>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount(){ //一開始自動播放
        this.start();
    }
    componentWillUnmount() { //銷燬前清除定時器
        this.stop();
    }
    stop = () => { //暫停
        let {timer} = this.state;
        clearInterval(timer);
    }
    start = () => { //開始
        let {timer} = this.state;
        timer = setInterval(() => {
            this.next();
        }, 2000);
        this.setState({
            timer
        })
    }
    change = (index) => { //點擊下面的按鈕切換當前顯示的圖片
        let {showIndex} = this.state;
        showIndex = index;
        this.setState({
            showIndex
        })
    }
    previous = (e) => { //上一張
        let ev = e || window.event;
        let {showIndex, imgs} = this.state;
        if(showIndex <= 0){
            showIndex = imgs.length - 1;
        }else{
            showIndex --;
        }
        this.setState({
            showIndex
        })
    }
    next = (e) => { //下一張
        let ev = e || window.event;
        let {showIndex, imgs} = this.state;
        if(showIndex >= imgs.length - 1){
            showIndex = 0;
        }else{
            showIndex ++;
        }
        this.setState({
            showIndex
        })
    }
}
export default ReactCarousel;
複製代碼複製代碼

css

.contain {
    position: relative;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 302px;
    transition: all .8s;
    transform: translateX(-50%);
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}
.contain .ul {
     height: 100%;
     list-style: none;
}
.contain .ul .items {
       position: absolute;
       top: 0px;
       width: 100%;
       height: 100%;
}
.ul li.show{
    display: block;
}
.ul li {
    display: none;
}
.ul li img {
    width: 100%;
    height: 100%;
}
.contain .dots {
     position: absolute;
     left: 50%;
     bottom: 30px;
     height: 10px;
     transform: translateX(-50%);
}
.dots li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 0px 5px;
    border-radius: 50%;
    transition: all .3s;
    background-color: antiquewhite;
    list-style: none;
}
.dots li.active {
   background-color: blue;
}
.control .left {
    position: absolute;
    top: 50%;
    left: 10px;
    padding: 5px;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
}
.control .left:hover {
    background-color: rgba($color: #000000, $alpha: 0.3);
}
.control .right {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 5px;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
}
.control .right:hover {
    background-color: rgba(0, 0, 0, .3);
}

複製代碼