javascript - 最も単純なイメージ ローテーター - SetInterval で失敗する

Question

最も単純な画像回転子で失敗した場合、どうすれば配列を循環させることができますか?

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers3.jpg"];
     i=0;
     setInterval(function(){
         $('.dimg').attr('src',source[i++])
     }, 2000);
 });

Answer 1

これは機能します：

$(document).ready(function () {
     var source = ["http://dummyimage.com/300x200/FFF/F00&text=GoodBye","http://dummyimage.com/300x200/000/fff&text=Hello"];
     var i=0;
     setInterval(function() {
         $('.dimg').attr('src', source[i++ % source.length])
     }, 2000);
 });

実際のデモ: http://jsfiddle.net/jfriend00/QXyjS/

変更点:

1. 各画像は、配列内に 1 回だけ存在します。
2. 配列へのインデックスは配列の長さのモジュロであるため、配列の長さを超えることはありません
3. vari変数の前に追加されるため、グローバルではありません。

Answer 2

次のようなものが必要だと思います：

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers1.jpg"];
     var idx = 0;

     function animate(idx) {
         idx++;
         if (idx >= source.length)
             idx = 0;
         $(".dimg").attr("src", source[idx]);
         setTimeout(function() {
             animate(idx);
         }, 2000);
     }
     animate(idx);
 });

【編集】setIntervalまずい！setTimeout厄介な落とし穴を避けるために、再帰呼び出しを使用してください。また、実用的な例も見つけることができます。