参考了这篇博客:
css部分也大部分使用的这篇博文里的样式
JS轮播图(网易云轮播图)
最终效果:
只写了自动轮播,没有写点击左右移动
使用的方法是用数组来循环改变轮播图的css属性
JSX部分
import React, {
useEffect,useState,useRef } from 'react';
import './index.less'
import banner1 from '@assets/static/banner1.jpg';
import banner2 from '@assets/static/banner2.jpg';
import banner3 from '@assets/static/banner3.jpg';
import banner4 from '@assets/static/banner4.jpg';
const EmoCarousel = () => {
const clsRef = useRef(['one','two','three','four'])
const dotsRef = useRef(['change','','',''])
const [dots,setDots] = useState([''])
const [cls,setCls]= useState([''])
useEffect(()=> {
setCls([...clsRef.current