使用react脚手架写一个轮播图

一、轮播图实现的功能

  自动轮播，手动点击轮播，点击下方小圆点轮播，当鼠标放到轮播图上的时候，停止轮播，离开后正常轮播

二、思路

   这个轮播图并不是将图片放成一排排，然后滑动对应的长度来进行轮播；而是根据条件渲染，定义一个对象属性，imageIndex，用来保存当前显示的是第几张图片，当索引Index与imageIndex相等时，才渲染

三、具体实现

先放源码，根据源码，来进行标注

CSS不用说了

* {
    padding: 0;
    margin: 0;
}



.body {
    position: relative;
    width: 400px;
    height: 400px;
    /* 将此盒子向右移动盒子宽度的120%，向下移动自身高度的20% */
    transform:  translate(120%,20%) ;
    /* 鼠标在上面时，变为小手 */
    cursor: pointer;
}

/* 关于图片 */

.ul {
    width: 100%;
    height: 100%;
}

li {
    list-style: none;
}

.ul .show {
    display: block;
}

.ul .hidden {
    display:none
}

img {
    width: 400px;
    height: 400px;
}

/* 关于下面对应的点 */
.spot {
    position: absolute;
    bottom: 20px;
    left: 45%;
    height: 20px;
    /* background-color: pink; */

}
.spot li {
    float: left;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #fff;
}

.spot .black{
    background-color: red;

}

.spot .white {
    background-color: #fff;
}

/* 关于两个左右按钮的 */
.left {
    position: absolute;
    top: 200px;
    left: 5px;
    width: 25px;
    height: 25px;
    color: red;
    line-height: 25px;
    text-align: center;
    background-color: rgba(0, 0, 0, .3);
}

.right {
    position: absolute;
    top: 200px;
    right: 5px;
    width: 25px;
    height: 25px;
    color: red;
    line-height: 25px;
    text-align: center;
}

JS源码

import React, { Component,Fragment} from 'react'

import './index.css'

//引入静态图片
import img1 from './images/1.jpeg'
import img2 from './images/2.jpeg'
import img3 from './images/3.jpeg'
import img4 from './images/4.jpeg'




export default class Index extends Component {

    state = {
        images:[img1,img2,img3,img4],//图片数组
        imageIndex:0,//表示当前显示的图片是第几张
        timer:null,//定时器存在与否
    }

    componentDidMount() {//一开始自动播放  组价挂载完之后执行
        this.start()
    }

    componentWillUnmount() { //销毁前清除定时器  当组件要被删除时执行
        this.stop();
    }

    //上一张
    pre = () => {
        // console.log('pre');
        let {images,imageIndex} = this.state

       if(imageIndex <= 0 ) {
           imageIndex = images.length - 1
       }else {
           imageIndex --
       }

       this.setState({
           imageIndex
       })
            
    }

    //下一张
    next = () => {
        let {images,imageIndex} = this.state
        
        if(imageIndex >= images.length -1){
            imageIndex = 0
        }else {
            imageIndex ++
        }

        this.setState({
            imageIndex
        })
    }

    //鼠标离开自动播放
    start = () => {
        let {timer} = this.state
        timer = setInterval(() => {
            this.next()
        },1000)
        //
        this.setState({
            timer
        })
    }

    //鼠标放上去就停止播放
    stop = () => {
        let {timer} = this.state
        clearInterval(timer)
        
    }

    //点小圆点跳到对应的图片
    changeIndex = (e) => {
        console.log('hhh');
        let {imageIndex} = this.state
        imageIndex = e
        this.setState({imageIndex})
    }

    render() {
        return (
            <Fragment>
                <div className='body'   
                    //写这两个事件的时候,要记得驼峰式写法
                    //onMouseEnter事件，鼠标放上去的时候执行
                    //onMouseLeave事件，鼠标离开的时候执行
                    onMouseEnter={()=>{this.stop()}}
                    onMouseLeave={()=>{this.start()}}
                >
                    <ul className='ul'>
                        {
                            this.state.images.map((item,index) => {
                                //要有return这个返回值
                                return(
                                    //用于显示当前imageIndex规定的图片，将其它的图片都隐藏掉
                                    <li key={item+index} className={index === this.state.imageIndex? 'show' : 'hidden'}>
                                        <img src={item} alt='轮播图'/>
                                    </li>
                                )
                            })
                        }
                    </ul>

                    <ul className='spot' style={{width:this.state.images.length *20 + 'px'}}>
                        {
                            this.state.images.map((item,index) => {
                                return (
                                    <li key={item+index} 
                                        className={index === this.state.imageIndex? 'black' : 'white'}
                                        // onClick = {this.changeIndex(index)} 要用箭头函数，不然函数会一直自动执行
                                        onClick = {()=> {this.changeIndex(index)}}

                                    >
                                        
                                    </li>
                                )
                            })
                        }
                    </ul>

                    <div className='left' onClick={this.pre}>左</div>
                    <div className='right' onClick={this.next}>右</div>
                </div>
            </Fragment>
        )
    }
}

四、使用hooks

import { useState , useEffect} from 'react'

import './one.css'

import img1 from './pictures/1.jpg'
import img2 from './pictures/2.jpg'
import img3 from './pictures/3.jpg'

const pic = [img1,img2,img3]
export default function Carouser() {
    let [index,setIndex] = useState(0)

    const next = () => {
        setInterval(() => {
            if(index > pic.length - 2) {
                index = 0
            } else {
                index++
            }
            setIndex(index)
        },1000)
    }

    useEffect(() => {
        next()
    },[])


    return (
        <>
            <div className="min">
                <img src={pic[index]}></img>
            </div>

        </>
    )
}









* {
    padding: 0;
    margin: 0;
}

.min {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    margin-top: -100px;
    margin-left: -150px;
    background: pink;
}

img {
    width: 300px;
    height: 200px;
}