如何使用javascript循环和数组显示图像幻灯片？
程序运行时，屏幕上只显示最后一个数组值图像，其他图像不显示。
这是 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;
}
}
}
幕布斯6054654浏览 148回答 3
3回答
-
Qyouu
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
您不需要循环所有图像，因为您的测试函数一次只需要一张图像。您可以做的是将 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"> -
一只斗牛犬
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 将确保该函数每秒被调用一次，并且将计数器移到函数外意味着它始终可以被访问，并且您始终可以在数组中获得正确的元素。
随时随地看视频慕课网APP
相关分类
JavaScript