javascript - 使用 jQuery 循环遍历 div

Question

我试图让这些 div 在单击箭头时淡出(就像一个非常简单的幻灯片)。我可以让它们一一淡出，就像这样:

$(document).ready(function(){
    $('li').click(function(){
        $(this).fadeOut();
    });
});

JSFIDDLE

但是，这不会让我

• 循环播放(因此当所有内容都淡出时重新开始)
• 当点击另一个类时它将不起作用

是否有一个 jQuery 方法可以循环遍历每个<li>和淡出。如果是最后一个li ，再次开始序列？

Answer 1

这是您需要的吗？ http://jsfiddle.net/x3buT/39/

在这里，我淡出第一张幻灯片，然后将其移至行尾并淡入下一张幻灯片

$(document).ready(function(){
    $('.slide:not(:first)').hide();
    //If you only need to change with the arrow, remove .slide from next line
    $('.slide,.arrow').click(function(){
        $('.slide').first().fadeOut(function(){
            $(this).next().fadeIn();
            $(this).appendTo('.inner');
        });
        return false;
    });
});