如何才能在react.js中有一个每5秒更改一次的映像？

Question

import React, { useEffect, useState } from "react";

import aa from '../imgs/aa.png'
import aa2 from '../imgs/aa2.JPG'
import aa3 from '../imgs/aa3.JPG'
import aa4 from '../imgs/aa4.JPG'



import './AnimatedGalery.css'



export default function () {

    return (
        <div>
        </div>
    )
}

我不知道怎么开始。我基本上想要一个图像（我可以调整大小并赋予css属性），每5秒改变一次，变成我这里有的4个导入图像中的另一个。

Answer 1

想法：把所有导入的图像放在一个列表中。为应该显示的当前图像提供一个状态变量。在使用随机选取的图像设置新状态的useEffect中，设置每5秒执行一次的intervall。

const images = [aa, aa2, aa3, aa4];

export default function ImageSwapper() {
    const [currentImage, setCurrentImage] = useState(null);

    useEffect(() => {
        const intervalId = setInterval(() => {
            setCurrentImage(images[Math.floor(Math.random() * items.length)]);
        }, 5000)
        
        return () => clearInterval(intervalId);
    }, [])

    return (
        <div>
            <img src={currentImage} />
        </div>
    )
}

如果您想要对图像进行旋转，那么我只需要保存currentIndex并显示它的图像：

const images = [aa, aa2, aa3, aa4];

export default function ImageSwapper() {
    const [currentIndex, setCurrentIndex] = useState(0);

    useEffect(() => {
        const intervalId = setInterval(() => {
            if(currentIndex === images.length - 1) {
                setCurrentIndex(0);
            } 
            else {
                 setCurrentIndex(currentIndex + 1);
            }
        }, 5000)
        
        return () => clearInterval(intervalId);
    }, [])

    return (
        <div>
            <img src={images[currentIndex]} />
        </div>
    )
}