javascript - 如何在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 秒执行一次的间隔，使用随机选取的图像设置新状态。

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>
    )
}