javascript - Jquery next 没有正确迭代

Question

我目前正在制作自己的幻灯片，一开始我已经在苦苦挣扎。目前我的对象中有两个函数：

init: function() {
    var self = this;
    if (this.element.find(".slide_item").size() == 1) {
        this.options.on = false;
    } else {
        setInterval(function() { self.next(); }, 5000);
    }
},

next: function() {
    var items = this.element.find(".slide_item");
    var current = this.element.find(".slide_item:visible");
    var next = current.next();

    current.slideUp("slow");
    if (next.is(":last-child")) {
        items.first().slideDown("slow");
    } else {
        next.slideDown("slow");
    }
}

我的幻灯片容器 ( .slideshow ) 中有三个项目，但我的代码实际上只在第一个和第二个项目之间切换。第三，最后一项总是被通过。我不知道为什么，当我使用console.log()检查所有输出时，一切似乎都很好。我的错误在哪里？

Answer 1

你的问题在这里：

if (next.is(":last-child")) {
    items.first().slideDown("slow");

这说明如果下一项是最后一项，则向下滑动第一项，有效地跳过最后一项。

相反，您想要做的是，如果下一个项目不存在，请向下滑动第一个项目。

if (next.length == 0) {
    items.first().slideDown("slow");

我更喜欢next用第一个更新 var。

var next = current.next();
if (next.length == 0) {
    next = items.first();
}

current.slideUp("slow");
next.slideDown("slow");