使用React Hook 编写网易云轮播图

参考了这篇博客:
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