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

很难说没有任何HTML或任何关于它的外观的建议。但我认为这是因为当你显示下一个图像时，你并没有隐藏任何以前的图像 - 这意味着图像可能会堆叠在一起。

试试看：

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

作为点击处理程序中的第一行，看看你得到了什么。

Answer 2

代码工作正常，但是当您显示所有图像并尝试再次显示第一张图像时，所有其他图像已经在它上面，因此显示它没有效果。

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方法不使用参数。

在第一个循环后停止循环一系列图像

2 个答案: