gpt4 book ai didi

javascript - 尝试从列表 JavaScript 中按顺序更改图像时出错

转载 作者:行者123 更新时间:2023-11-28 14:55:59 25 4
gpt4 key购买 nike

我有一个 list :

var images = ["image1.png", "image2.png", "image3.png", "image4.png"];

我编写了一个代码,尝试在页面加载时显示 image1,但每 3 秒图像就会更改为列表中的下一个图像。然而,当代码运行时,它卡在 image1 上并且在接下来的 3 秒内没有变化。

这是迄今为止我的 JavaScript 代码:

<html>
<body>
<body onload = "myFunction()">
<img src ="image1.png" id = "target" >
<script language="javascript">
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];

function myFunction() {
counter++;
if (counter > 4) {
counter = 0
}
target = document.getElementById ("target").src = images[counter];
setTimeout("myFunction", 3000)

}
window.onLoad = function(){
myFunction();
}
</script>
</body>
</html>

我见过类似的代码,但回答的答案不符合我的规范。

最佳答案

您可以使用setInterval(传递函数而不是字符串),而不是递归调用setTimeout。另请注意,使用模 (%) 运算符可以大大简化您的计数器逻辑:

<html>

<body>
<img src="image1.png" alt="image1.png" id="target">
<script language="javascript">
var counter = 0;
var images = ["image1.png", "image2.png", "image3.png", "image4.png"];
var target = document.getElementById("target")

setInterval(function myFunction() {
counter = (counter + 1) % images.length
target.src = target.alt = images[counter]
}, 3000)
</script>
</body>

</html>

关于javascript - 尝试从列表 JavaScript 中按顺序更改图像时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42889702/

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