Jquery 周期'；主动'；带旋转木马的班级

我有一个有九张幻灯片的旋转木马，第一张幻灯片有一个“活动”类

<ul class='nav'>
    <li class='left'>left</li>
    <li class='right'>right</li>
</ul>

<ul class='carousel'>
    <li class='active'></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

任何帮助都将不胜感激。谢谢

$('.nav .right').click(function () {
    $('.carousel .active:not(:last-child)').removeClass('active').next().addClass('active');
});
$('.nav .left').click(function () {
    $('.carousel .active:not(:first-child)').removeClass('active').prev().addClass('active');
});

---

当然可以改进，但以下代码适用于您需要执行的操作：

$('.nav .right').click(function(){
    var next = $('.carousel .active').removeClass('active').next();
    if (next.length == 0) { next = $('.carousel li').first(); }
    next.addClass('active');
});

---

它当然可以改进，但以下代码适用于您需要执行的操作：

$('.nav .right').click(function(){
    var next = $('.carousel .active').removeClass('active').next();
    if (next.length == 0) { next = $('.carousel li').first(); }
    next.addClass('active');
});

试一试

演示：

另一个变体：

试试看

演示：

---

另一个变体：

看看这个：你能为这个添加小提琴吗

var $carousel = $('.carousel');
$('.nav .right').click(function(){
    var next = $carousel.children('.active').removeClass('active').next();
    if(!next.length){
        next = $carousel.children().first();
    }
    next.addClass('active');
});

$('.nav .left').click(function(){
    var prev = $carousel.children('.active').removeClass('active').prev();
    if(!prev.length){
        prev = $carousel.children().last();
    }
    prev.addClass('active');
});