Question

我正在使用一个小插件滑块，它有两个主要功能 rotate（）和 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
    }

如果这是错误，如何找到列表的next（）子项？

Answer 1

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

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

jquery滑块旋转功能

1 个答案: