1 回答

TA貢獻1853條經(jīng)驗 獲得超18個贊
在 中保留當(dāng)前圖像的索引state,然后定義一種每秒遞增它的方法。調(diào)用該方法useEffect以在頁面加載時啟動,然后img通過索引數(shù)組用正確的圖像填充。
function Carousel() {
const [imageIndex, setImageIndex] = React.useState(0);
const images = ["image_1", "image_2", "image_3"];
const nextImage = () => {
setImageIndex(prev => (prev + 1) % images.length)
setTimeout(nextImage, 1000)
}
React.useEffect(nextImage, [])
return (
<div>
<img src={images[imageIndex]} alt={images[imageIndex]}/>
</div>
);
}
ReactDOM.render( <Carousel /> , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
添加回答
舉報