jQuery Cycle自定義導航

Question

使用jQuery Cycle插件創建內容幻燈片（不是圖片） - 我如何讓下面的代碼工作？

這是我的幻燈片內容：

 <div id="slideshow"> 
      <div> 
       <h1>Title One</h1> 
       <p>Description for title one</p>   
      </div> 
      <div> 
       <h1>Title two</h1> 
       <p>Description for title two</p>   
      </div> 
      <div> 
       <h1>Title Three</h1> 
       <p>Description for title three</p>   
      </div> 
      <div> 
       <h1>Title Four</h1> 
       <p>Description for title four</p>   
      </div> 
     </div> 

這是下面的自定義導航：

 <div id="slideshow-nav"> 
      <ul> 
       <li> 
        <a href="#"> 
         <span class="thumb one"></span> 
         <span class="title">One</span> 
         <span class="desc">Desc one</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="thumb two"></span> 
         <span class="title">Two</span> 
         <span class="desc">Desc two</span> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="thumb three"></span> 
         <span class="title">three</span> 
         <span class="desc">Desc three</span> 
        </a> 
       </li> 
       <li class="last"> 
        <a href="#"> 
         <span class="thumb four"></span> 
         <span class="title">Four</span> 
         <span class="desc">Desc Four</span> 
        </a> 
       </li> 

      </ul> 
     </div> 

很明顯，我希望在導航欄上的錨鏈接到對應於右滑以上。如果可能的話，我還想將「活動」類添加到當前選定的導航欄中？

作爲一個例子，Brightcove（http://www.brightcove.com/en/）或多或少的做我想試圖在那裏幻燈片。

感謝

Answer 1

問題解決了：

我用這個代碼：

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

     $('#slideshow-nav li').click(function() { 
      $('#slideshow').cycle('pause'); 
     }); 

     $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
      $(pager).find('li').removeClass('activeLI') 
       .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
     }; 

確保您使用 「jquery.cycle.all.min.js」 藏漢而不是精簡版的版本因爲這不支持尋呼機選項。