jquery - 向后循环 div — jQuery

Question

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

但是，我似乎无法扭转这一点。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

我相信这就是你想要的：

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

});

Answer 2

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

小提琴：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');
});