將類添加到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"); 
      } 
});