最簡單的圖片旋轉器 - 在使用setInterval

用最簡單的圖像旋轉器的失敗失敗，我怎樣才能通過陣列得到這只是週期？最簡單的圖片旋轉器 - 在使用setInterval

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

來源

2013-10-14 rootsup

請告訴我們失敗了呢？ – jfriend00

這工作：

$(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/

變化：

每個圖像僅在陣列一次。
索引到陣列爲模的陣列的長度，以便它不會超過所述陣列
var在i可變前面加所以它不是全局的長度。

來源

2013-10-14 20:39:38 jfriend00

真棒jfriend00 - ％source.length是什麼意思？ – rootsup

'i％source.length'用'source.length'分隔'i'，表達式的值是除法運算的其餘部分。所以，如果'i'是'3'，那麼3/2的剩餘部分就是1.這是一種常見的技巧，可以保留在數組中並獲得包裝/重複值。在這個例子中，它將會變爲'0'，'1'，'0'，'1'等等......參見[這裏]（https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Operators/Arithmetic_Operators）用於'％'運算符。 – jfriend00

聰明！謝謝！ – rootsup

我想你想是這樣的：

$(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來避免一些令人討厭的陷阱。並且還可以找到working example。

來源

2013-10-14 20:36:58 nietonfir

hmmmmmm @nietonfir我正在考慮一個循環，但然後我只是刪除設置的時間間隔，因爲它應該運行在自己的循環，不是嗎？ – rootsup

你爲什麼要設置多個'setInterval（）'調用。似乎不像任何人想要的。 – jfriend00

@rootsup使用'setInterval'函數被異步調用。定時器不會等到功能完成才能重新開始。因此，如果任何對函數的調用比定時器間隔更長，那麼您將至少得到亂序執行，並且還可能存在內存泄漏/性能問題（取決於函數中發生了什麼）。 – ach

最簡單的圖片旋轉器 - 在使用setInterval

回答

相關問題