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

一个快速简单的解决方案是使用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');
});

Answer 2

我相信这就是你想要的：

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

});

循环通过div向后 - jQuery

2 个答案: