Jquery循环问题

时间:2013-05-09 22:30:45

标签: javascript jquery html css loops

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

The fiddle is here

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

所有的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过渡,这将使每个图像淡入

请有人帮忙!

1 个答案:

答案 0 :(得分: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从数组中取出第一个元素并{{1它回到数组的末尾。使用数组中的元素将进入一个循环,您不必维护计数器并重置它等...

正确的方法是: -

Demo

push