自定義尋呼機返回jquery循環使用Modulus

Question

試圖讓這個自定義尋呼機爲jQuery Cycle工作。

我希望pagerAnchorBuilder每5張圖像就返回一個list項目，以便稍後我可以將尋呼機變成它自己的週期。

下面的代碼：

pagerAnchorBuilder: function(idx,slide){ 
     var $slideCount = $('#ul-homecycle > li').length; 
      if ((idx==0) || (idx%5 === 0)){ 
       return '<li><a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a></li>'; 
      } 
      else{ 
       return '<a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a>'; 

      } 
    } 

所以在最後我想循環回本：

<ul> 
<li> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
</li> 
<li> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
<a href="javascript:void(0);">derp</a> 
</li> 
</ul> 

請忽略從JS的HTML字符串回報setSlide(#)和類值，我有這個控制權。即使經過2個小時的搜索，我也無法弄清楚。

在此先感謝！

Answer 1

我終於搞清楚了。下面是修改後的代碼，註釋爲您提供方便：

function cycles(){ 
    //Activate main slide with proper pager/carousel container. 
    $('#ul-homecycle').after('<div id="homecycle-carousel-container"><a href="javascript:void(0);" id="btn-homecycle-prev" class="transhover"></a><a href="javascript:void(0);" id="btn-homecycle-next" class="transhover"></a><ul id="homecycle-carousel">').cycle({ 
     timeout: 7000, 
     speed: 500, 
     sync: true, 
     fx: 'fade', 
     fit: 0, 
     startingSlide: 2, 
     activePagerClass:'active', 
     slideResize: 0, 
     pager: '#homecycle-carousel', 
     pagerAnchorBuilder: function(idx,slide){ 
      return '<a href="javascript:setSlide('+ idx +')" class="transhover"><img src="../images/home/thumb_carousel' + idx + '.jpg" width="183" height="72" /></a>'; 
     }, 
     // Build pager that automagically hightlights updated pager thumb and also continue to next pager slide if the next thumb isn't visible 
     updateActivePagerLink: function(pager, activeIndex) { 
      $(pager).find('a').not(':eq('+activeIndex+')').removeClass('active').children('img').fadeTo(200,.5) 
      $(pager).find('a:eq('+activeIndex+')').addClass('active').children('img').fadeTo(200, 1); 

      //If next slide in carousel is hidden then go to next carousel slide 
      if ($(pager).find('a:eq('+activeIndex+')').parent('li').css('display') == "none"){ 
       $('#homecycle-carousel').cycle('next'); 
      } 
     } 
    }); 
     //Before building the carousel wrap an Li around every 5 thumbs  
     $('#homecycle-carousel > a').each(function(i) { 
      var a = $('#homecycle-carousel > a'); 
      for(var i = 0; i < a.length; i+=5) { 
       a.slice(i, i+5).wrapAll('<li></li>'); 
      } 
     }); 
     //Now that we have Lis wrapped around every 5 thumbs, initiate new cycle  
     $('#homecycle-carousel').cycle({ 
      easing: 'easeOutSine', 
      prev: '#btn-homecycle-prev', 
      next: '#btn-homecycle-next', 
      slideExpr: 'li', 
      activePagerClass:'active', 
      timeout:0, 
      speed: 500, 
      fx: 'scrollHorz' 
     }); 
     //Artifically activate new thumb 
     $('#homecycle-carousel li a').click(function(){ 
     if(!$(this).hasClass('active')){ 
      $('#homecycle-carousel li a').not(this).removeClass('active').children('img').fadeTo(200,.5); 
      $(this).addClass('active').children('img').fadeTo(200,1); 
     } 
     }); 

}