javascript - 如何使用 javascript 循环和数组显示图像幻灯片？

Question

程序运行时，屏幕上只显示最后一个数组值图像，其他图像不显示。

这是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;
    }
   }
}

Answer 1

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，但我想无论如何我都会与您分享这个示例。