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

Question

我几乎已经完成了此滑块，但是我不知道如何实现next（）和prev（）的功能。 如何实现这些功能？

http://jsfiddle.net/M4t4L/11/

$(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) {
            if (!isAnimating) {

                isAnimating = true;
                e.preventDefault(e);

                i++; if (i >= count) { i = 0; }
                j++; if (j >= count) { j = 0; }

                container.find("li")
                    .finish()
                    .removeClass('active')
                    .last()
                    .width(0)
                    .addClass("active")
                    .animate({
                    "width": "100%"
                }, 800,
                function () {
                    container.find("li").first().appendTo(container);
                    isAnimating = false;
                });
            }
        });


    });

问题是当我实现这些功能并按next或prev时。 一秒钟显示最后一张幻灯片，然后切换到所需的幻灯片

http://jsfiddle.net/M4t4L/9

Answer 1

如果要运行“下一个”或“上一个”功能，则需要控制所在位置的滑块数量。 恐怕您将不得不与您的i / j一起玩，并使位置朝两个方向发展。

现在，您要计算i和j的位置，您可能想去的位置是一个var位置和一个滑块对象数组，然后只需单击一下即可调用要加载的下一个/上一个对象，并且动画可以开始。

大概是这样

var pos = 0;
var container = $('#scene').find('li');

$('.back').click(function() {
    pos = pos - 1;
    moveIt(pos);
});

$('.forth').click(function() {
    pos = pos +1;
    moveIt(pos);
});

function moveIt(pos) {
    container[pos]... // Your animation goes here
}