js滑块的上一步/下一步函数

Question

我几乎完成了这个滑块，但我不知道如何实现next()和prev()的功能。如何实现这些功能?

同样，如果我向滑块添加超过3个幻灯片，那么它就会停止正常工作。我该如何处理超过3张的幻灯片?

http://jsfiddle.net/M4t4L/3/

$(function () {
    var container = $("#scene"),
        i = 0,
        count = container.find("li").length,
        j = container.find("li").length - 1,
        isAnimating = false;
    container.find("li:first").css({
        "width": "100%"
    });
    $("#trigger").click(function (e) {
        e.preventDefault(e);
        i++;
        if (i >= count) {
            i = 0;
        }
        j++;
        if (j >= count) {
            j = 0;
        }
        container.find("li")
            .finish()
            .removeClass('active')
            .eq(2)
            .width(0)
            .addClass("active")
            .animate({
            "width": "100%"
        }, 400,
        function () {
            container.find("li").first().appendTo(container);
        });
    });
});

Answer 1

超过3张幻灯片失败的原因是'eq(2)'。将其更改为'last()'，现在可以工作了。

实现prev()和next()只是切换逻辑的问题。不是将第一个添加到列表中，而是将最后一个添加到列表中以向后移动。

更新了小提琴，以反映'最后()'的变化，也删除了一些无用的东西在那里，并清理了一点。

http://jsfiddle.net/M4t4L/5/

$(function () {
    var container = $("#scene");
    container.find("li:first").css({
        "width": "100%"
    });
    $("#trigger").click(function (e) {
        e.preventDefault(e);
        container.find("li")
            .finish()
            .removeClass('active')
            .last()
                .width(0)
                .addClass("active")
                .animate({ "width": "100%" }, 400, function () {
                    container.find("li").first().appendTo(container);
                });
    });
});