jquery - 循环 'active' 类与轮播

Question

我有一个包含九张幻灯片的轮播，其中第一张有一个“事件”类。

<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>

当点击'right'按钮时，active类需要移动到下一个li(它也需要在最后一个之后应用回到第一个li)。

很明显，当点击左键时，事件类需要向相反的方向移动。

我尝试了以下方法，这在一定程度上起到了作用，但我不知道如何让事件类在最后一个 li 之后回到第一个 li。

$('.nav .right').click(function(){
    $('.carousel .active').removeClass('active').next().addClass('active');
});

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

它当然可以改进，但以下代码适用于您需要做的事情:

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