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;
    }
});

後で各画像をフェードインさせるcss3トランジションを追加するつもりなので、toggleclassがそこにある必要があります

誰か助けてください！

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;
  });
});

もう1つの問題は、インクリメントし続けると配列が範囲外になるためループが壊れ、代わりに使用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 に答える