jquery - 使用 jQuery 的无限轮播循环 onClick

Question

我在使用 jQuery 构建轮播时遇到问题:我目前正在使用 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
        });
    });