无限旋转木马循环onClick使用jQuery

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

' slide '类在所有项目中都是通用的。您可以使用它应用常见的CSS样式，但不能通过这个"slide"类选择一个特定的项目。您需要通过唯一的东西来选择元素。在这种情况下-它的' current '类。

这是一个很好的方法-

$(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
        });
    });