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” 藏汉而不是精简版的版本因为这不支持寻呼机选项。