jquery - 向后循环 div — jQuery

Question

我制作了一个非常简单的幻灯片。单击箭头将使$(this)淡出，下一张幻灯片将使用next()函数fadeIn()。

但是，我似乎无法扭转这一局面。 prev() 和 next() 似乎没有循环回 DOM，它们只是返回到树上。这是代码和 jsfiddle:

$('li').first().siblings().hide();

$('.next').click(function () {
    $(this)
        .parent('body')
        .find('li:first-child')
        .fadeOut(function () {
        $(this)
            .next()
            .fadeIn()
        $(this)
            .appendTo('ul')
    });

});

JSFIDDLE

Answer 1

一个快速简单的解决方案是仅使用 active 类来跟踪当前事件的 li，这使您的 JS 更加简单。您可以进一步简化它，并将两个点击处理程序放入一个函数中，但为了简单起见，我保留了这种方式。

fiddle :http://jsfiddle.net/Yqqbv/

$('li').first().siblings().hide();
$('li').first().addClass('active');

$('.next').click(function () {
    var $active = $('li.active');

    $active.hide();
    $active.next().fadeIn().addClass('active');
    $active.removeClass('active');
});

$('.back').click(function () {
    var $active = $('li.active');

    $active.hide();
    $active.prev().fadeIn().addClass('active');
    $active.removeClass('active');
});