使用jQuery进行简单的幻灯片放映（不会超越第一个孩子）

Question

我有一个简单的幻灯片，但它只滑到第二张图片：

http://jsfiddle.net/tmyie/RCQUx/1/

$('.next').click(function(){
    $('.img:first').fadeOut(function(){
        $(this).next().fadeIn();
    });

});

我知道我需要使用$(this)选择器。有没有办法这样做，没有从.next遍历？通常情况下.next将是兄弟姐妹或后代等。

Answer 1

因为.img:first将始终返回相同的元素。一旦元素淡出，您可以将其移动到队列的末尾。

$('.next').click(function () {
    $('.img:first').stop(true, true).fadeOut(function () {
        $(this).next().fadeIn().end().appendTo(this.parentNode);
    });
});

演示：Fiddle