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 个导入图像中的另一个。
最佳答案
想法:将所有导入的图像放在一个列表中。具有应显示的当前图像的状态变量。在 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>
)
}
关于javascript - 如何在react.js 中获得每 5 秒更改一次的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67243653/