Question

我在使用jQuery构建carrousel时遇到问题：我目前正在使用next（）或prev（）添加和删除类，但我想在点击时无限循环播放所有幻灯片。这是我想要做的完美示例：mfglabs.com。

这是我的代码：

<div class="container-slider">
        <ul>
            <li class="slide current">
                <article>
                 // My content
                </article>
            </li>
            <li class="slide">
                <article>
                // My content
                </article>
            </li>
        </ul>
</div>

这是我的jQuery：

$(document).ready(function() {
    $(".next").click(function () {
        $(".slide").removeClass("current");
        $(".slide").next().addClass("current");   
    });
    $(".prev").click(function () {
        $(".slide").removeClass("current");
        $(".slide").prev().addClass("current");   
    });
});

谢谢！

Answer 1

＆＃39; slide＆＃39; class在所有项目中都是通用的。您可以使用它来应用常见的CSS样式，但不能通过此slide＆＃39; current＆＃39;选择一个特定的项目。类。您需要通过独特的东西选择元素。在这种情况下 - 它的$(document).ready(function() { $(".next").click(function () { if($(".current").next().length){ // if Next element Exists var nextElem = $(".current").next(); $(".current").removeClass("current"); nextElem.addClass("current"); }else{ // No Next item i.e. reached Last item // Selecting first item to make it 'current' var firstElem = $(".current").parent().children().first(); $(".current").removeClass("current"); firstElem..addClass("current"); } }); $(".prev").click(function () { // something similar }); });＆＃39;类。

这可能是一个很好的方法 -

{{1}}

使用jQuery的无限轮播循环onClick

1 个答案: