[英]How can I have an image that changes every 5 seconds in react.js?
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>
)
}
I have no idea how to start with this.我不知道如何开始。 I basically want an image (that I can resize and give css properties) that changes every 5 seconds to another one of those 4 imported images I have here.
我基本上想要一个图像(我可以调整大小并提供 css 属性),每 5 秒更改一次到我在这里拥有的这 4 个导入图像中的另一个。
The idea: put all imported images in a list.想法:将所有导入的图像放在一个列表中。 Have a state variable for the current image that should be displayed.
为应该显示的当前图像设置一个 state 变量。 Set an intervall that executes every 5 seconds in a useEffect that sets the new state with a randomly picked image.
在 useEffect 中设置每 5 秒执行一次的间隔,该 useEffect 将新的 state 设置为随机选取的图像。
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>
)
}
If you want to have a rotation of your images, then I would just save the currentIndex and display its image:如果您想旋转图像,那么我只需保存 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>
)
}
you can add all the images name in a array like this:-您可以像这样在数组中添加所有图像名称:-
const temp =[aa,aa2,aa3,aa4]常数温度 =[aa,aa2,aa3,aa4]
const [counter,setCounter] = useState(0);
setInterval(function(){
counter === 4 ? setCounter(0) : setCounter(counter + 1);
}, 5000);
In tag you can use it like this在标签中,您可以像这样使用它
<img src=`{temp[counter]}` />
You can define a function to get current image, and use setInterval()
to change image every five seconds, which you can define insideuseEffect
when the component renders :您可以定义一个 function 来获取当前图像,并使用
setInterval()
每五秒更改一次图像,您可以在组件渲染时在useEffect
内部定义:
const getPicture = index => {
switch (index) {
case 1:
return "'../imgs/aa.png";
case 2:
...
default:
break;
}
};
const NUMBER_OF_PICTURES = 4;
export default function Menu() {
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setIndex(prevIndex => (index == NUMBER_OF_PICTURES ? 0 : prevIndex + 1));
}, 5000);
return () => {
/* cleanup */
clearInterval(timer);
};
/* on component render*/
}, []);
return (
<>
<img src={getPicture(index)} />
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.