Question

如何设置间隔或者可以通过数组超时，每2秒产生一次元素效果，例如1-idea的想法是编程这样的：

for (photoKey in arrBigPhotoes) {
      setInterval(function() {
        // alert(arrBigPhotoes[photoKey]);

          document.getElementById("big_photo").src='/upload/images/'+arrBigPhotoes[photoKey];

      }, 2000);
}

但它没有正常工作。可能有人可以帮我完成这项任务我会非常高兴。我也有一个jQuery - 解决方案可能是通过这个库，但没有任何插件。感谢。

Answer 1

尝试这样的事情 -

var photos = ['1.jpg', '2.jpg', '3.jpg'];
var photo_index = 0;

function switchPhoto() {
  photo_index = (photo_index + 1) % photos.length;
  document.getElementById('big_photo').setAttribute('src', '/upload/images/' + photos[photo_index]);
}

setInterval(switchPhoto, 2000);

你应该把它放在某种文档就绪事件处理程序

中

Answer 2

我建议你预加载你想要显示的图像。如果用户连接速度很慢，您的方法就会失败。

var images = new Array();
var counter = 0;

var image = document.createElement("img");
image.onload = function() {
    counter++;
};
image.src = <url>;
images.push(image);

计数器在那里，以便您可以确定何时正确加载所有图像。假设您有六张图像，那么，在您的“intervaled”函数中，如果counter < 6，您将立即返回。

您的“切换台”功能可能看起来像这样

var i = 0;

setInterval(function() {
    if (counter < 6) return;

    i = (i+1) % images.length;
    document.getElementById("big_photo").src = images[i].src;
}, 2000);

在javascript中通过数组设置间隔

2 个答案: