react轮播图

自己写了一个react轮播图，最近在学习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 (
            
"ReactCarousel">
                
"contain" 
                     onMouseEnter={()=>{this.stop()}} //鼠标进入停止自动播放
                     onMouseLeave={()=>{this.start()}}  //鼠标退出自动播放
                >
                    
"ul">
                        {
                            this.state.imgs.map((value, index) => {
                                return (
                                    
'show' : ''}
                                        key={index} 
                                    > 
                                        '')} alt="轮播图" />
                                    
                                )
                            })
                        }
                    
                    
"dots" style={{width: this.state.imgs.length * 20 + 'px'}}> 
                        {
                            this.state.imgs.map((value, index) => {
                                return (
                                    
'active' : ''} 
                                        onClick={()=>{this.change(index)}}>
                                    
)
                            })
                        }
                        
                    
                    
"control">
                        "left"  onClick={(e)=>{this.previous(e)}}>左
                        "right" onClick={(e)=>{this.next(e)}}>右
                    
                
            
        )
    }
    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);
}

复制代码

转载于:https://juejin.im/post/5c380b7051882525487c4163