使用轮播循环“活动”类答案

【问题标题】：Cycle 'active' Class with Carousel使用轮播循环“活动”类
【发布时间】：2013-07-16 09:02:06
【问题描述】：

我有一个带有九张幻灯片的轮播，其中第一张有一个“活动”类。

<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'按钮时，活动类需要移动到下一个li（它也需要应用回到最后一个li之后的第一个li）。

显然，当单击左键时，活动类需要向相反方向移动。

我尝试了以下，这在一定程度上有效，但我不知道如何让活动课程回到最后一个之后的第一个 li。

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

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

【问题讨论】：

看看这个：stackoverflow.com/questions/7414573/…
你可以为此添加一个小提琴

标签： jquery css carousel

【解决方案1】：

当然可以改进，但以下代码可以满足您的需要：

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

【讨论】：

【解决方案2】：

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

FIDDLE

【讨论】：

【解决方案3】：

试试

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');
});

演示：Fiddle

另一个变体：Fiddle

【讨论】：