タグの属性を変更するための配列のjQuery繰り返しループ

Question

imgタグのsrc属性とアンカータグの属性を変更することによって動作する単純なスライダを作成しています。これはこれまでのところ私が思いついたことです：

(function($){ 
    var slides = [ 
     'http://placehold.it/801x350', 
     'http://placehold.it/802x350', 
     'http://placehold.it/803x350' 
    ], 
    titles = [ 
     'Title 1', 
     'Title 2', 
     'Title 3' 
    ], 
    links = [ 
     'http://test1.com', 
     'http://test2.com', 
     'http://test3.com' 
    ], 
    image = $('#stretch-img'), 
    anchor = $('.featured-title>h2>a'); 

    var interval = setInterval(function() { 
     image.attr('src', slides[0]); 
     anchor.attr('href', links[0]); 
     anchor.html(titles[0]); 
    }, 3000); 
})(jQuery); 

単純なフェード効果で配列を連続的にループさせたいと思います。これを行うための最善の方法やこれを行うための方法は何でもできます。私は誰も持っていません。

ありがとうございます！

私はすべての助けに感謝します。あなたの配列をループし

Answer 1

あなたは現在の位置変数や配列の長さを節約する変数を設定することができます。そして、あなたはフェードアウトすることができますフェードソースを変更する次に

var current = 0, 
    length = slides.length, 
    interval = setInterval(function() { 
     image.attr('src', slides[current]); 
     anchor.attr('href', links[current]).html(titles[current]); 

     current++; 
     if (current >= length) { 
      current = 0; 
     } 
    }, 3000); 

をフェードバックイン：：

 image.fadeOut(500, function() { 
      image.attr('src', slides[current]).fadeIn(500); 
      anchor.attr('href', links[current]).html(titles[current]); 

      current++; 
      if (current >= length) { 
       current = 0; 
      } 
     }); 

これは、画像fadeIn(500)キックイン、image要素のloadイベントにアタッチイベントハンドラを使用して固定することができる非常にロードされていないにつながる可能性が

var image = $('#stretch-img').on('load', function() { 
    image.fadeIn(500); 
}); 

fadeIn(500)は、イメージがロードされたときに起動するため、間隔機能から削除することができます。 loadイベントは、イメージのソースが変更され、新しいソースのロードが完了するといつでも発生します。

.on()はjQuery 1.7で新しく、この場合は.bind()と同じです。