react轮播图示例

index.tsx

import React, { useRef, useEffect, useState } from 'react'

import './swiper.less'
import _ from 'lodash'
import img1 from 'assets/img/1.jpg'
import img2 from 'assets/img/2.jpg'
import img3 from 'assets/img/3.jpg'
import img4 from 'assets/img/4.jpg'
import { Button } from 'antd'


export default () => {

    const imgList = [
        {
            img: img1
        },
        {
            img: img2
        },
        {
            img: img3
        },
        {
            img: img4
        }
    ]
    const [isShow, setIsShow] = useState(true)

    const ref = useRef<any>({
        current: { currentIndex: 0, runIn: null }
    })

    const getPrevIndex = (nowIndex) => {//当下标是第0个,前一个就是最后一个
        if (nowIndex === 0) {
            return imgList.length - 1
        }
        else {
            return nowIndex - 1
        }
    }
    const getNextIndex = (nowIndex) => {//当前下标是最后一个,后一个下标就是第0个
        if (nowIndex === imgList.length - 1) {
            return 0
        }
        else {
            return nowIndex + 1
        }
    }

    function goto(index) {
        setIsShow(false)
        setTimeout(() => {
            setIsShow(true)
            ref.current.currentIndex = index
        }, 200)
    }

    function slideClick(i) {
        clear()
        goto(i)
    }
    function play() {
        if (ref.current.runIn) clear()
        ref.current.runIn = setInterval(() => {
            goto(getNextIndex(ref.current.currentIndex))
        }, 1000)
    }

    function clear() {
        clearInterval(ref.current.runIn)
    }

    function goLeft() {
        clear()
        goto(getPrevIndex(ref.current.currentIndex))
    }

    function goRight() {
        clear()
        goto(getNextIndex(ref.current.currentIndex))
    }

    useEffect(() => {
        if (isNaN(ref.current.currentIndex)) ref.current.currentIndex = 0
        play()
    }, [])

    return (
        <>
            <div>
                <div className="slider">
                    <div onMouseOut={play} onMouseOver={clear}>
                        <Button className="left-btn" onClick={goLeft}>&lt;</Button>
                        <Button className="right-btn" onClick={goRight}>&gt;</Button>
                    </div>

                    <ul className="container" onMouseOut={play} onMouseOver={clear}>
                        <li>
                            {isShow && <img src={_.get(imgList[ref.current.currentIndex], 'img')} alt=""
                            />}
                            {!isShow && <img src={_.get(imgList[ref.current.currentIndex], 'img')} alt=""
                                style={{ transform: 'translateX(200px)', transition: 'all 700ms cubic-bezier(0.19, 1, 0.22, 1)' }}
                            />}
                        </li>
                    </ul>
                </div>

                <ul className="btn-list" onMouseOut={play} onMouseOver={clear}>
                    {_.map(imgList, (_, index) => {
                        return <li v-for="(item, index) in sliders" key={'btn-list_' + index} onClick={() => slideClick(index)}>{index + 1}</li>
                    })}
                </ul>
            </div>
        </>
    )
}

swiper.less

* {
    margin: 0;
    padding: 0;
}
.slider {
    position: relative;
}
.container{
    width: 100%;
    display: flex;
    overflow: hidden;
  }
  .left-btn,.right-btn{
    position: absolute;
    margin-top: 100px;
    width: 30px;
    height: 30px;
    text-align: center;
    background-color: pink;
  }
  .left-btn {
    left: 0;
  }
  .right-btn {
    left: calc(100% - 30px);
  }
  ul,li {
    list-style: none;
  }
  .container li {
    width: 100%; 
    height: 33vw;
    overflow: hidden;
  }
  .container li img{
    width: 100%; 
    left: 0;
  }
  .btn-list {
    display: flex;
    align-items: center;
  }
  .btn-list li{
    display: inline-flex;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 20px;
    background-color: pink;
    margin-left: 10px;
  }

App.tsx使用:

import React from 'react';
import Swpier from './pages/swiper';


const App = () => {
  return (
      <Swpier />
  )
}

export default App;

代码仓库地址:

命运推手/my_web