jQuery的滑块旋转功能

Question

我使用的一个小插件，滑块有2个主要功能旋转（）和rotateSwitch（）

rotate = function(){  
    var triggerID = $active.attr("rel") - 1; 
    var image_reelPosition = triggerID * imageWidth; 

    $(".paging a").removeClass('active'); 
    $active.addClass('active'); 

    //Slider Animation 
    $(".image_reel").animate({ 
     left: -image_reelPosition 
    }, 500); 

}; 


rotateSwitch = function(){  
    play = setInterval(function(){ 
     $active = $('.paging a.active').next(); 
     if ($active.length === 0) { 
      $active = $('.paging a:first'); //go back to first 
     } 
     rotate(); //Trigger the paging and slider function 
    }, 7000); (7 seconds) 
}; 

rotateSwitch(); 

这种运作良好，如果分页按钮如下：

<div class="paging"> 
    <a href="#" rel="1">1</a> 
    <a href="#" rel="2">2</a> 
    <a href="#" rel="3">3</a> 
    <a href="#" rel="4">4</a> 
</div> 

但我的问题（需要风格）是分页是这样做的;

<div class="paging"> 
     <ul> 
       <li><a href="#" rel="1">1</a></li> 
       <li><a href="#" rel="2">2</a></li> 
       <li><a href="#" rel="3">3</a></li> 
       <li><a href="#" rel="4">4</a></li> 
      </ul> 
</div> 

然后旋转不起作用。我认为这个问题是没有找到，因为这行下面的链接：（在rotateSwitch（）函数）

$active = $('.paging a.active').next(); 
    if ($active.length === 0) { 
     $active = $('.paging a:first'); //go back to first 
    } 

如果是这样的错误，如何找到列表中的下一个（）的孩子吗？

Answer 1

是的，a.active没有在li里面的兄弟姐妹，因此没有.next()的结果。您需要遍历父级以先找到下一个li，然后再跳回到以下链接：

$active = $('.paging a.active').parent().next().find('a');