在第一個循環後停止循環一組圖像

Question

var arr = $("#w01 > img").toArray(); // array created from images in a div 
$('.btns .next').click(function(){ 
    var first = arr[0]; 
    arr.push(arr.shift(first)); //moves the first image at the bottom of the stack 
    $(arr[0]).show(); //shows the next image 
}); 

它可以工作，但是當到達最後一個圖像時，過程停止，而不是再次顯示第一個圖像，無限循環！

Answer 1

該代碼工作正常，但是當您顯示所有圖像並嘗試再次顯示第一個圖像時，所有其他圖像已經在其上，因此顯示它沒有效果。

show方法只改變元素的可見性狀態，它不會將元素移動到可以看到它的位置。

隱藏當前圖像，當你展示一個新的，這樣只會有一個圖像可見的時間：

var arr = $("#w01 > img").toArray(); // array created from images in a div 
$('.btns .next').click(function(){ 
    $(arr[0]).hide(); 
    arr.push(arr.shift()); //moves the first image at the bottom of the stack 
    $(arr[0]).show(); //shows the next image 
}); 

注：shift方法不使用參數。

Answer 2

很難說沒有任何HTML或任何關於它看起來像什麼的建議。但我認爲這是因爲當你展示下一張圖像時，你並沒有隱藏任何以前的圖像 - 這意味着圖像可能堆疊在一起。

嘗試放：

$("#w01 > img").hide(); 

在單擊處理程序的第一行，看看你會得到什麼。