Question

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

的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

下一个功能的代码有两个问题。

最后一张幻灯片的next()元素将是a标记，因此长度始终为> 0。您可以评估下一个是否是＆＃34;幻灯片＆＃34;元素：
```
var nextSlide = currentSlide.next('.slide');
```
如果nextslide不存在，您需要转到first()元素：
```
nextSlide = $('.slide').first();
```

Updated Demo

_{感谢@Jonathan Lam的演示}

Answer 2

nextslide=$(".activeslide")

if语句中的

将无效，因为activeslide是您当前的幻灯片。该脚本什么都不做

怎么样？

nextslide=$(".slide").first()

自制图像轮播不循环

2 个答案: