javascript - 自制图片轮播不循环

Question

所以我自制的 jQuery 图像轮播有一个奇怪的错误。我也已经检查了建议的类似主题，但它们没有帮助。所以这是一个简单的六张图片，带有下一个箭头和上一个箭头。如果你使用 prev 箭头到达最后，那么它会成功循环到最后一张图像，但如果你尝试使用 next 箭头从最后一张图像返回到第一张图像，则需要额外点击两次，在第一次点击后它会搞砸页面并使一切乱七八糟。有什么建议吗？

JavaScript

$('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    if(prevSlide.length === 0) {
        prevSlide = $('.slide').last();
    }

    currentSlide.removeClass('active-slide');
    prevSlide.addClass('active-slide');
});

$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    if(nextSlide.length === 0) {
        nextSlide = $('.active-slide');
    }

    currentSlide.removeClass('active-slide');
    nextSlide.addClass('active-slide');
});

(相关)HTML

<div class="slider">
    <div class="slide active-slide">
        <img src="img/image-2.jpg">
    </div>
    <div class="slide">
        <img src="img/image-3.jpg">
    </div>
    <div class="slide">
        <img src="img/image-4.jpg">
    </div>
    <div class="slide">
        <img src="img/image-5.jpg">
    </div>
    <div class="slide">
        <img src="img/image-1.jpg">
    </div>
    <div class="slide">
        <img src="img/image-6.jpg">
    </div>
    <a href="#" class="arrow-prev"><img src="img/Arrow-Prev.png" width="75px" height="75px"></a>
    <a href="#" class="arrow-next"><img src="img/Arrow-Next.png" width="75px" height="75px"></a>
</div>

(相关)CSS

.slider {
    display: block;
    margin-left: 9%;
}

.slide {
    display: none;
}

.active-slide {
    display: block;
}

.slider img {
    max-width: 90%;
    margin-top: 15px;
}

.slider .arrow-prev {
    margin-left: 13%;
}

.slider .arrow-next {
    float: right;
    margin-right: 25%;
}

Answer 1

下一个函数的代码有两个问题。

1. 最后一张幻灯片的 next() 元素将是 a 标签，因此长度始终为 > 0。您可以评估下一个是否是“幻灯片”元素:

   var nextSlide = currentSlide.next('.slide');
   

2. 如果下一张幻灯片不存在，您需要转到 first() 元素:

   nextSlide = $('.slide').first();
   

---

Updated Demo

_{感谢@Jonathan Lam 的演示}