循环“活动”类与旋转木马

我有一个有9个幻灯片的旋转木马，其中第一个有一类“活动”。循环“活动”类与旋转木马

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

当点击了“右”按钮，则活性类需要移动到下一个里（它也需要最后一个之后被施加回第一LI）。

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

我尝试了以下几点，但是我不知道如何让活动类返回到最后一个之后的第一个li。

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

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

来源

2013-07-16 user2586455

看一看这样的：http://stackoverflow.com/questions/7414573/how-to-cycle-through-siblings-using-jquery – Pieter

u能添加一个捣鼓这个 – dreamweiver

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

来源

2013-07-16 09:05:36 Spokey

它肯定能得到改善，但下面的代码工作，你需要做什么：

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

来源

2013-07-16 09:07:32

工程完美，谢谢！ – user2586455

尝试

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

来源

2013-07-16 09:08:29

循环“活动”类与旋转木马

回答

相关问题