Question

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

$(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

如果要运行Next或Prev功能，则需要控制滑块的编号。我担心你将不得不玩你的i / j并使这个位置向两个方向发展。

现在你计算你的i和j，你可能想去的地方是有一个位置var和一组滑块对象，然后只需要点击就可以调用下一个/ prev对象加载和动画可以开始。

这样的事可能......

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
}

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

1 个答案: