猿问

如何使用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(){&nbsp; &nbsp;var index = 0;&nbsp; &nbsp;for(var count=0; count<images.length; count++){&nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; &nbsp;setTimeout(test, 1000);&nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp;}}setTimeout()这里不会做你认为它会做的事情。它不会在继续之前引入延迟。它实际上告诉引擎关闭并自行计算 1,000 毫秒，而您的代码继续运行。换句话说，您setTimeout()几乎同时调用循环的长度。我会这样做：const imageUrls = [&nbsp; 'first.jpg',&nbsp; 'second.jpg',&nbsp; 'third.jpg',&nbsp; 'fourth.jpg'];const imgEl = document.querySelector('img');imgEl.src = imageUrls[0];function advanceImage() {&nbsp; imgEl.src = imageUrls[imageUrls.indexOf(imgEl.src) + 1] || imageUrls[0];}setInterval(advanceImage, 1000);在这种情况下，我们将图像初始化为第一个 URL。然后，我们每一秒都找出当前索引是什么，并在其中添加一个。如果我们到达数组中不存在的部分，则默认为第一个图像 URL。理想情况下，您根本不会为此使用任何 JavaScript 并使用 CSS 来完成，但我想无论如何我都会与您分享这个示例。
0

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() {&nbsp; // Update the image&nbsp; document.getElementById('mg').src = images[currentImage] + ".jpg";&nbsp; document.getElementById("mg").width = "100";&nbsp; document.getElementById("mg").height = "100";&nbsp; // Update the index for the next tick&nbsp; currentImage += 1;&nbsp; if (currentImage === images.length) {&nbsp; &nbsp; currentImage = 0;&nbsp; }&nbsp; // Set next tick&nbsp; setTimeout(test, 1000);}<img id="mg" alt="image not found">
0

一只斗牛犬

Do you have to use the loop?&nbsp; If not, try this:<html>&nbsp; &nbsp; <head>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <img id="mg" alt="image not found">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; var images=["image", "image2","img","imag"]&nbsp; &nbsp; &nbsp; &nbsp; test();&nbsp; &nbsp; &nbsp; &nbsp; var count = 0;&nbsp; &nbsp; &nbsp; &nbsp; function test(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("I am executing with count at " + count);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('mg').src = images[count] + ".jpg";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("mg").width = "500";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("mg").height = "300";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(count + 1 >= images.length){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ++count;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; setInterval(test, 1000);&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </body></html>setInterval 将确保该函数每秒被调用一次，并且将计数器移到函数外意味着它始终可以被访问，并且您始终可以在数组中获得正确的元素。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答