React里面的旋转

因为在react里面图片必须先提前引入 

例子：

import toukui_nor from "../../assets/image/toukui_nor.png";

import toukui_hov from "../../assets/image/toukui_hov.png";

import anquan_nor from "../../assets/image/anquan_nor.png";

import anquan_hov from "../../assets/image/anquan_hov.png";

import shigu_nor from "../../assets/image/shigu_nor.png";

import shigu_hov from "../../assets/image/shigu_hov.png";

import jiankong_nor from "../../assets/image/jiankong_nor.png";

import jiankong_hov from "../../assets/image/jiankong_hov.png";

import keshihua_nor from "../../assets/image/keshihua_nor.png";

import keshihua_hov from "../../assets/image/keshihua_hov.png";

import tingche_nor from "../../assets/image/tingche_nor.png";

import tingche_hov from "../../assets/image/tingche_hov.png";

js代码

import "./Carousel.css";
import { useEffect, useState, useRef } from "react";
const Carousel = () => {
const [carousel,setCarousel]=useState([
    {
      id: 1,
      blueImg: toukui_nor,
      yellowImg: toukui_hov,
      text: "非机动车未带头盔识别系统",
      isBlue: false,
    },
    {
      id: 2,
      blueImg: anquan_nor,
      yellowImg: anquan_hov,
      text: "交通安全画像系统",
      isBlue: false,
    },
    {
      id: 3,
      blueImg: shigu_nor,
      yellowImg: shigu_hov,
      text: "交通事故智能定位分析系统",
      isBlue: false,
    },
    {
      id: 4,
      blueImg: jiankong_nor,
      yellowImg: jiankong_hov,
      text: "交通态势监控系统",
      isBlue:false,
    },
    {
      id: 5,
      blueImg: keshihua_nor,
      yellowImg: keshihua_hov,
      text: "可视化作战平台",
      isBlue: false,
    },
    {
      id: 6,
      blueImg: tingche_nor,
      yellowImg: tingche_hov,
      text: "停车卡口接入系统",
      isBlue: false,
    },
])
  const CarouselBox = useRef(null);
  useEffect(() => {
   //开始旋转
    for (let i = 0; i < CarouselBox.current.children.length; i++) {
      CarouselBox.current.children[i].style['animation-delay'] = ` ${
        -5 - i * 3.3
      }s, -${i * 3.3}s , -${i * 3.3}s`;
    }
  }, []);
  //划入停止旋转
  const onmouseenter = (id) => {
    for (let i = 0; i < CarouselBox.current.children.length; i++) {
      CarouselBox.current.children[i].style["animation-play-state"] = `paused`;
    }
    let obj = carousel.find((item) => item.id === id);
    console.log(obj);
    obj.isBlue = !obj.isBlue;
    setCarousel([...carousel])
  };
    //划出旋转开始
      const onmouseleave = (id) => {
        for (let i = 0; i< CarouselBox.current.children.length; i++) {
           CarouselBox.current.children[i].style['animation-play-state'] = `running`
        }
        let obj = carousel.find((item) => item.id === id);
        obj.isBlue = !obj.isBlue
        setCarousel([...carousel])
    }
    //点击出现提示
    const onclick = (id) => {
        let obj = carousel.find(item => item.id === id)
        alert(obj.text)
    }
  return (
    <div className="Carousel" ref={CarouselBox}>
      {carousel.map((item) => {
        return (
          <div
            className="carousel-item"
            key={item.id}
            onMouseEnter={(e) => onmouseenter(item.id)}
            onMouseLeave={(e)=>onmouseleave(item.id)}
            onClick={()=>onclick(item.id)}
          >
            <img src={item.isBlue ? item.yellowImg : item.blueImg} alt="" />
            <p>{item.text}</p>
          </div>
        );
      })}
    </div>
  );
};

export default Carousel;

css代码

.Carousel{
    color: #fff;
    margin-top: 80px;
    text-align: center;
    position: relative;
    width: 100%;
    height: 350px;
}
.carousel-item{
    width: 160px;
    font-size: 14px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    animation-name: xAni,yAni,scaleAni;
    animation-iteration-count: infinite;
    animation-duration: 10s,10s,20s;
    animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
    animation-direction: alternate;
}
.carousel-item p{
    padding: 0;
    margin: 0;
}
@keyframes xAni {
    0% {
        left: -50px;
    }
    100% {
        left: calc(100% - 110px);
    }
}
@keyframes yAni {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}
@keyframes scaleAni {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.5);
    }
}

效果：