javascript - 简单的 img 轮播功能不起作用？

Question

所以我正在为我正在构建的模拟网页创建一个简单的图像轮播。 我目前正在关注 this tutorial在YouTube上。分钟:7:10 显示我询问的功能。

在本教程中，他创建了这个 jquery 函数来激活轮播。

$(document).ready(function(){

    $(".nextLink").on("click", function(){
        var currentActiveImage = $(".image-shown");
        var nextActiveImage = currentActiveImage.next();

        currentActiveImage.removeClass(".image-shown").addClass(".image-hidden");
        nextActiveImage.addClass(".image-shown").removeClass("image-hidden");
    });

});

这是 HTML

<div class="carousel-outer">
            <figure class="carousel-inner">
                <img class="image-shown" src="images/team/alex_morrales.jpg" alt="">
                <img class="image-hidden" src="images/team/david_kim.jpg" alt="">
                <img class="image-hidden" src="images/team/jenny_tabers.jpg" alt="">
                <img class="image-hidden" src="images/team/joey_barrett.jpg" alt="">
                <img class="image-hidden" src="images/team/melinda_lee.jpg" alt="">
                <img class="image-hidden" src="images/team/rachel_dotson.jpg" alt="">
            </figure>
            <div class="img-buttons-box">
                <div class="img-buttons">
                    <a class="previousLink" href="#">Previous</a>
                    <a class="nextLink" href="#">Next</a>
                </div>
            </div>
        </div>

这是 CSS

.image-shown {
    display: inline-block;
}

.image-hidden {
    display: none;
}

我的印象是上述功能本身足以让轮播正常工作并无缝地循环浏览照片。

始终显示队列中的下一个并隐藏其余的。

但是，这显然不是这种情况，因为这是我第一次点击“下一步”按钮之前和之后的样子(在后续按下时它不会执行任何操作)。

之前

之后

非常感谢帮助理解为什么该功能看起来不足以使轮播正常工作，谢谢。

Answer 1

当您在 .removeClass() 或 .addClass() 中引用类时，您不必在类前写点。

$(document).ready(function(){

    $(".nextLink").on("click", function(){
        var currentActiveImage = $(".image-shown");
        var nextActiveImage = currentActiveImage.next();

        currentActiveImage.removeClass("image-shown").addClass("image-hidden");
        nextActiveImage.addClass("image-shown").removeClass("image-hidden");
    });

});

PS:我是使用开发工具看到的；单击“Next”并查看 img 如何获得带点的类。如果您想快速调试 DOM 更改，这只是一个建议。