Question

我在myClass中有这个方法。当它到达数组的末尾时，我希望它从0开始，但是它刚刚停止。

this.jsonParse = function() {
    for (var i = 0; i < this.numberOfPhotos; i++){
         (function(index, selector, timing, arrayLength){
            setTimeout(function() {
               $(selector).css('background-color': obj_gallery.images[index].hex);
            }, index*timing);            
         })(i, this.slideWrap, this.timing,this.numberOfPhotos);
    }
}

我在下面尝试过类似的内容，但它不起作用。

if (index >= arrayLength) {
    index = 0;
}

NB 之前已定义过this.numberOfPhotos等局部变量。

Answer 1

虽然我认为我明白你想做什么（无限期旋转图像），但你的方法相当可怕。假设你在旋转中有1000张图像，你至少有1000个计时器在运行，并且你一次加载所有1000张图像。

相反，我使用索引上使用模运算符的简单方法，以及更新两个图库图像之一的简单函数。

首先，基本HTML非常简约：

<div id="gallery">
    <img id="gallery_a" onload="galleryLoaded()" />
    <img id="gallery_b" onload="galleryLoaded()" />
</div>

onload事件用于在加载可见图像后实际切换，并防止在加载完成之前切换图像。

我已设置an example on JSFiddle来展示这种方法。

此处不需要特殊的CSS。要使过渡效果起作用，您需要对第二张图像进行一些最小化设置：

#gallery_b {
    opacity: 0;
    transition: opacity 1s;
}

定期调用的函数（也可以通过按钮或某个链接启动）将更新当前图像的索引并交换当前不可见的图像：

// This function will init the switch
function galleryNext() {
    if (gallery_switching)
        return;

    // Prevent multiple switches at once    
    gallery_switching = true;

    // Get the next index (the modulo will make it wrap around)
    gallery_index = (gallery_index + 1) % images.length;

    // Update the inactive image
    // This could also update some link target or similar
    document.getElementById(gallery_second ? 'gallery_a' : 'gallery_b').src = images[gallery_index];

    // Toggle the next image
    gallery_second = !gallery_second;
}

onload事件将切换图像（基本上只是根据需要隐藏第二个图像）：

// This function is a callback once the next image has been loaded
function galleryLoaded() {
    if (!gallery_switching)
        return;
    gallery_switching = false;

    // If the second image is the next, we'll have to hide it now (since we want to show the first one)
    document.getElementById('gallery_b').style.opacity = gallery_second ? 1 : 0;
}

最后但并非最不重要的是，您必须设置间隔并立即显示第一张图片。

setTimeout(galleryNext, 0); // Fake "onload" here
setInterval(galleryNext, 2500); // Switch once every 5 seconds

当然，您也可以在其他地方为图片设置初始src。

Answer 2

我想你可能想要使用setInterval（）代替 - http://codepen.io/anon/pen/ogVodo

 this.jsonParse = function(){
  // Ho bisogno di una funziona anonimica per passare i parametri, poiche il setTimeout non lo fa.
  var slideWrap = this.slideWrap;
  var timing = this.timing;
  var numberOfPhotos = this.numberOfPhotos;
  var index =0;
  setInterval(function() {
     $(".gallery").css('background-color', obj_gallery.images[index].hex);
     index++;
     if (index === numberOfPhotos){
        index = 0;
     }
        },timing);            
  };

Answer 3

我建议采用不同的方法，使用递归，而不是增量超时。首先，我创建一个可以重用的抽象：

function cycle(delay, f, xs) {
   var run = function(i) {
      setTimeout(function() {
         f(xs[i])
         i += 1
         if (i >= xs.length) {
            i = 0
         }
         run(i)
      }, delay)
   }
  f(xs[0])
  run(1)
}

然后您可以执行以下操作：

this.jsonParse = function(){
    var $el = $(this.slideWrap)
    var bgcolor = function(img) {
        $el.css('background-color', img.hex)
    }
    cycle(this.timing, bgcolor, obj_gallery.images)     
};

例如：DEMO

为每个和setTimeout迭代一个数组无限次

3 个答案: