Question

我差不多完成了这个滑块，但我不知道如何实现next()和prev()的功能。我该如何实现这些功能？

此外，如果我向滑块添加3张以上的幻灯片，则它会停止正常工作。我如何处理超过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（）只需要切换逻辑。而不是将第一个附加到列表中，而是将最后一个添加到列表中以向后移动。

更新了小提琴，以反映'last（）'的变化，并删除了一些无用的东西并清理了一下。

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);
                });
    });
});

js滑块的上一个/下一个功能

1 个答案: