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 next = current.next();
if (next.length == 0) {
    next = items.first();
}

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