Question

所以我正在为我建造的模拟网页创建一个简单的图像轮播。我目前正在关注YouTube上的this tutorial。分钟：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;
}

我认为上述功能本身就足以让旋转木马工作得很好并且无缝地循环拍摄照片。

始终在阵容中显示下一个并隐藏其余部分。

然而，显然情况并非如此，因为这是我在点击＆＃34; next＆＃34;之前和之后的样子。第一次按钮（它在后续按下时不做任何事情）。

在

帮助理解为什么这个功能看起来不足以让旋转木马工作得到非常感谢，谢谢。

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：我通过使用devtools看到了这一点;单击“下一步”，看到img如何获得带点的类。如果您想快速调试DOM更改，请提供建议。

简单的img旋转木马功能不起作用？

1 个答案: