Question

function nextSlideFunc() {
    var currentSlide = $(".slide.active-slide");
    var currentSlideIndex = $(".slide.active-slide").index();
    var nextSlideIndex = currentSlideIndex + 1;
    var nextSlide = $(".slide").eq(nextSlideIndex);

    $("#nextBtn").on("click", function(e) {
        e.preventDefault();

        currentSlide.removeClass("active-slide");

        if(nextSlideIndex === $(".slide").last().index() + 1) {
            //stay at last slide when reached.
            $(".slide").eq(nextSlideIndex - 1).addClass("active-slide");
        } else {
            nextSlide.addClass("active-slide");
        }
    });

}

点击下一个按钮后，幻灯片转到下一张幻灯片，这是我想要的，但是当我继续点击时，它就停止前进了。

我在开发工具中检查了我的HTML，它在其中一张符合条件的幻灯片上有类名“active-slide”，但我不确定它为什么不起作用。

至于上一个按钮，它不会像它应该的那样删除“active-slide”类，不知道为什么会发生这种情况吗？

Answer 1

您必须在click事件的侦听器中设置变量：

https://codepen.io/anon/pen/OxMxwd

$("#prevBtn").on("click", function(e) {
    var currentSlide = $(".slide.active-slide");
    var currentSlideIndex = $(".slide.active-slide").index();
    var prevSlideIndex = currentSlideIndex - 1;
    var prevSlide = $(".slide").eq(prevSlideIndex);
}

这样，每次单击按钮时，都会计算索引和下一个索引。你这样做的方法是计算一次并一遍又一遍地重复使用它，所以你会一遍又一遍地对同一个索引做同样的事情。

jQuery Content Slider点击后停止工作

1 个答案: