0

我有应该是一个简单的 jquery 延迟图像循环

小提琴在这里

我检查了我的语法，但我不知道为什么它拒绝工作。

所有的 css 和代码似乎都是正确的。

这是功能

$(document).ready(function () {
$.doTimeout('loop', 500, function () {
    //changes the background of img2 to 'i' in 'sequence'
    $(".img2").css('background', 'url(' + sequence[i] + ')');
    //increments 'i' for the next image
    i++;
    //toggles the class 
    $("img1").toggleClass("img2");
    //changes the the background of img1 to 'i' in 'sequence' ready for when class is toggled again
    $(".img1").css('background', 'url(' + sequence[i] + ')');
    //toggles the class
    $("img2").toggleClass("img1");
    //increments 'i; for the next change
    i++;
    //restarts the loop if i is equal to the sequence length
    if (i === sequence.length) {
        i = 0;
    }
});

toggleclass 必须在那里，因为我打算稍后添加 css3 过渡，这将使每个图像淡入

有人可以帮忙吗，拜托！

4

1 回答 1

2

在您的回调中返回True以使循环再次发生，文档中提到了这一点。

$(document).ready(function(){
  // Start a polling loop with an id of 'loop' and a counter.
  $.doTimeout('loop', 500, function(){
     
      $('.img1').css('background', 'url(' + sequence[i] + ')');
      i++;
      return true;
  });
});

另一个问题是你的循环会中断，因为你的数组会随着你的增加而越界Array.shift，而不是用来从数组中取出第一个元素并将push其返回到数组的末尾。随着数组中的这个元素将进入一个循环，你不必维护一个计数器并重置它等等......

正确的做法是：-

演示

var sequence = ["http://goo.gl/u4QHd",
    "http://goo.gl/s5tmq",
    "http://goo.gl/MMsQ6",
    "http://goo.gl/dtEYw"];

$(document).ready(function(){
  // Start a polling loop with an id of 'loop' and a counter.
  $.doTimeout('loop', 500, function(){
     var url = sequence.shift(); //Remove the first element out of the array
      sequence.push(url); //push it to the end of the array. probably you can put it after the next statement.
      $('#img1').css('background', 'url(' + sequence[0] + ')');//get the first item from the array. this will always be the next one to previous cycle.
      return true;
  });
});
于 2013-05-09T22:37:27.707 回答