1 回答
![?](http://img1.sycdn.imooc.com/545865620001c45402760276-100-100.jpg)
TA贡献1853条经验 获得超18个赞
在 中保留当前图像的索引state,然后定义一种每秒递增它的方法。调用该方法useEffect以在页面加载时启动,然后img通过索引数组用正确的图像填充。
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>
添加回答
举报