程序运行时，屏幕上只显示最后一个数组值图像，其他图像不显示。这是 HTML 代码<img id="mg" alt="image not found">这是javascript代码var images=["image", "image2","img","imag"]test();function test(){ var index = 0; for(var count=0; count<images.length; count++){ document.getElementById('mg').src = images[count] + ".jpg"; document.getElementById("mg").width = "500"; document.getElementById("mg").height = "300"; index = index + 1; setTimeout(test, 1000); if(index + 1 > images.length){ index = 0; count = 0; } }}
3 回答
Qyouu
TA贡献1786条经验 获得超11个赞
function test(){
var index = 0;
for(var count=0; count<images.length; count++){
...
setTimeout(test, 1000);
...
}
}
setTimeout()这里不会做你认为它会做的事情。它不会在继续之前引入延迟。它实际上告诉引擎关闭并自行计算 1,000 毫秒，而您的代码继续运行。
换句话说，您setTimeout()几乎同时调用循环的长度。
我会这样做：
const imageUrls = [
'first.jpg',
'second.jpg',
'third.jpg',
'fourth.jpg'
];
const imgEl = document.querySelector('img');
imgEl.src = imageUrls[0];
function advanceImage() {
imgEl.src = imageUrls[imageUrls.indexOf(imgEl.src) + 1] || imageUrls[0];
}
setInterval(advanceImage, 1000);
在这种情况下，我们将图像初始化为第一个 URL。然后，我们每一秒都找出当前索引是什么，并在其中添加一个。如果我们到达数组中不存在的部分，则默认为第一个图像 URL。
理想情况下，您根本不会为此使用任何 JavaScript 并使用 CSS 来完成，但我想无论如何我都会与您分享这个示例。
holdtom
TA贡献1805条经验 获得超10个赞
您不需要循环所有图像，因为您的测试函数一次只需要一张图像。您可以做的是将 currentIndex 存储在函数之外并在每次执行时更新它。下面是一个例子：
var images = ["https://api.adorable.io/avatars/100/1", "https://api.adorable.io/avatars/100/2", "https://api.adorable.io/avatars/100/3", "https://api.adorable.io/avatars/100/4"]
var currentImage = 0;
test();
function test() {
// Update the image
document.getElementById('mg').src = images[currentImage] + ".jpg";
document.getElementById("mg").width = "100";
document.getElementById("mg").height = "100";
// Update the index for the next tick
currentImage += 1;
if (currentImage === images.length) {
currentImage = 0;
}
// Set next tick
setTimeout(test, 1000);
}
<img id="mg" alt="image not found">
一只斗牛犬
TA贡献1784条经验 获得超2个赞
Do you have to use the loop? If not, try this:
<html>
<head>
</head>
<body>
<img id="mg" alt="image not found">
<script type="text/javascript">
var images=["image", "image2","img","imag"]
test();
var count = 0;
function test(){
console.log("I am executing with count at " + count);
document.getElementById('mg').src = images[count] + ".jpg";
document.getElementById("mg").width = "500";
document.getElementById("mg").height = "300";
if(count + 1 >= images.length){
count = 0;
}
else
{
++count;
}
}
setInterval(test, 1000);
</script>
</body>
</html>
setInterval 将确保该函数每秒被调用一次，并且将计数器移到函数外意味着它始终可以被访问，并且您始终可以在数组中获得正确的元素。
添加回答
举报
0/150
提交
取消