将类添加到jQuery循环插件中活动幻灯片的链接

Question

我想添加一个类到当前幻灯片的链接。我的JavaScript代码是

$(document).ready (function() { 
$('#slideshow').cycle({ 
      fx: 'fade', 
      speed: 500, 
      timeout: 1000, 
      pause: 1, 
      cleartype: true, 
      cleartypeNoBg: true, 
      pager: '#forpager', 
      pagerAnchorBuilder: function(idx, slide) { 
       return '#forpager li:eq(' + (idx) + ')'; 
      } 
     }); 


    $('#forpager ul li a').click(function(){ 
     $('#forpager ul li a').removeClass("active"); 
     $(this).addClass("active"); 
    }); 


}); 

而对于幻灯片的HTML代码

<div id="forslideshow"> 
     <div id="slideshow"> 

      <div class="image"> 
      <center><img src="images/pic1.jpg" alt="Renny"/></center> 
      </div> 

      <div class="image"> 
      <center><img src="images/pic2.jpg" alt="Giselle"/></center> 
      </div> 

      <div class="image"> 
      <center><img src="images/pic3.jpg" alt="Emma Goldman"/></center> 
      </div> 

     </div> 

     <div id="forpager"> 
     <ul> 
      <li ><a href="#"><img src="images/menupic.png"/></a></li> 
      <li ><a href="#"><img src="images/menupic.png"/></a></li> 
      <li ><a href="#"><img src="images/menupic.png"/></a></li> 
     </ul> 
     </div> 


    </div> 

问题是，这段代码，当我点击某个特定链接，滑亮，链接有活动类，但其他如幻灯片循环其相应的链接不是没有活动类。任何人都可以给我代码，可以添加/更改幻灯片放映开始时，当我没有点击链接链接的类。

Answer 1

下面的代码工作。但在应用循环之前使用updateActivePagerLink函数。

$(document).ready (function() { 

    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 

       $(pager).find('li').removeClass('active') 

       .filter('li:eq('+currSlideIndex+')').addClass('active'); 


    }; 



$('#slideshow').cycle({ 
      fx: 'fade', 
      speed: 500, 
      timeout: 1000, 
      pause: 1, 
      cleartype: true, 
      cleartypeNoBg: true, 
      pager: '#forpager', 
     pagerAnchorBuilder: function(idx, slide) { 
       return '#forpager li:eq(' + (idx) + ')'; 
      } 

}); 

Answer 2

我觉得选项“后，”你应该使用这里http://jquery.malsup.com/cycle/options.html

$('#slideshow').cycle({ 
      fx: 'fade', 
      speed: 500, 
      timeout: 1000, 
      pause: 1, 
      cleartype: true, 
      cleartypeNoBg: true, 
      pager: '#forpager', 
      pagerAnchorBuilder: function(idx, slide) { 
       return '#forpager li:eq(' + (idx) + ')'; 
      }, 
      after: function() { 
       $('#forpager ul li a').removeClass("active"); 
       $(this).addClass("active"); 
      } 
});