gpt4 book ai didi

javascript - 如何在 ReactJs 上使用循环进行轮播自动更改而不是单击 onclick

转载 作者:行者123 更新时间:2023-12-04 07:54:10 25 4
gpt4 key购买 nike

我尝试将这种轮播方式用于我的横幅。如何在不单击左右按钮的情况下自动更改。由于只有 2 张图像,我该如何让它循环?

import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";


function Carousel() {
const [currImg, setCurrImg] = useState(0);

return (
<div className="carousel">
<div
className="carouselInner"
style={{ backgroundImage: `url(${images[currImg].img})` }}
>
<div
className="left"
onClick={() => {
currImg > 0 && setCurrImg(currImg - 1);
}}
>

</div>
<div className="center">
<h1>{images[currImg].title}</h1>
<p>{images[currImg].subtitle}</p>
</div>
<div
className="right"
onClick={() => {
currImg < images.length - 1 && setCurrImg(currImg + 1);
}}
>

</div>
</div>
</div>
);
}

export default Carousel;

最佳答案

您可以设置一个间隔以在后台运行它,更改 currImg。下面的代码假设您有 2 张幻灯片。如果你有更多的幻灯片,你可以自定义它。

useEffect(()=> {
const changeSlide = setInterval(() => setCurrImg(prevState => 1-prevState) , 1000) // change your switch time here.
return () => clearInterval(changeSlide);
}, [])

关于javascript - 如何在 ReactJs 上使用循环进行轮播自动更改而不是单击 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66794462/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com