使用轮播循环“活动”类

我有一个带有九个幻灯片的旋转木马，其中第一个有一类“活跃”。

 
left
 
right
 
 
 
 
 
 
 
 
 
 
 
  

单击“右侧”按钮时，活动类需要移动到下一个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'); }); 

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

小提琴

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

演示： 小提琴

另一种变化： 小提琴