jQuery循環：1個週期，多個尋呼機

Question

長時間閱讀器，第一次海報。 :)

我使用jQuery的週期插件，它可以在這裏下載：http://jquery.malsup.com/cycle/

我得到了它在後部分工作正常，但一個請求進來有尋呼機控制上面和下面的對象那個週期。

看起來第二個尋呼機沒有被接通，要麼突出顯示活動面板尋呼機鏈接，並點擊第二個尋呼機控制器只是在地址欄中添加「＃」到網址。

我看到這個帖子： stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin

哪種有道理，但不知道爲什麼它會是從什麼不同我的，我的最終結果可以在這裏看到：http://dev02.web.lumens.demandware.net/on/demandware.store/Sites-Lumens-Site/default/Search-Show?cgid=brands如果你一直滾動到底部。

的HTML看起來是這樣的：

<ul class="pager"></ul> 
     <div id="list-screens" class="list-screens"> 
     <div class="list-view-row"><!-- content goes here-></div> 
    </div> 
    <ul class="pager"></ul> 

對於使用Javascript：

jQuery(document).ready(function() { 
     var markupBegin = '<li><a href="#">'; 
     var markupEnd = "</a></li>"; 
     var i = 0; 
     var pagerArray = ["A - E","F - J", "K - O","P - T","U - Z", "#"]; 
     var detailPagerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","${'#'}"]; 
     jQuery("${'#'}list-screens").children().each(function(index, element) { 
     jQuery(".list-view .pager").append(markupBegin + pagerArray[i] + markupEnd); 
     //if(i <jQuery("${'#'}list-screens").children().length - 1) { 
     jQuery(".list-view .pager").append("<li class='divider'></li>"); 
     //} 
     i++; 
     }); 
     jQuery(".list-view .pager").append("<li><a href=\"#\">See All Brands</a>"); 
     jQuery(".list-view .pager").append("<li class='clear'></li>"); 
     // browse listview 

     jQuery("#list-screens").cycle({ 
      fx:  'scrollLeft', 
      easing: 'linear', 
      timeout: 0, 
      speed: 750, 
      width:935, 
      height:500, 
      pager: ".list-view .pager", 
      pagerAnchorBuilder: function(idx, slide) { 
      // console.log(idx); 
      //for every amount its over 1 we have to add an extra to account for the divider li 

      if(idx == 0) { // shouldn't have to do anything 
      } else { 
       idx = idx + (idx); 
      } 
      return ".list-view .pager li:eq("+ idx +") a"; 
     }, 
     updateActivePagerLink : function(pager, currSlideIndex) { 
      if(currSlideIndex != 0) { 
       currSlideIndex = currSlideIndex + currSlideIndex; 
      } 
      jQuery(pager).find("li").removeClass("activeSlide").filter('li:eq('+currSlideIndex+')').addClass("activeSlide"); 
     } 
    }); 

我或許可以嘗試只捕捉點擊和鉤到循環的事件，並迫使它這樣但這似乎有點不可思議。我確實注意到有一個選項可以讓鏈接點擊泡泡。我真的不確定這是否是我需要的。感謝你的幫助。

Answer 1

你總是可以依傍的手動尋呼機創建並單擊處理

的例子可以在這裏找到：

http://jquery.malsup.com/cycle/goto2.html

這造成1個尋呼機，但您可以創建許多隻是喜歡它在第二個按鈕容器

var bc = $('#buttonContainer'); 

var $container = $('#container').cycle({ 
    fx:  'scrollHorz', 
    speed: 300, 
    timeout: 0 
}); 

$container.children().each(function(i) { 
    // create input 
    $('<input type="button" value="'+(i+1)+'" />') 
     // append it to button container 
     .appendTo(bc) 
     // bind click handler 
     .click(function() { 
      // cycle to the corresponding slide 
      $container.cycle(i); 
      return false; 
     }); 
});