jQuery Cycle插件 - 每次點擊導航鏈接時如何從幻燈片的開頭重新開始？

Question

每次我點擊導航鏈接「服務」時，它會顯示我訪問過的上一部分。相反，我想重新開始顯示總是第一節。我該如何做這件作品？

這是HTML標記：

<ul id="nav"> 
<li id="nav-home">Home</li> 
<li id="nav-services">Services</li> 
<li id="nav-contact">Contact</li> 
</ul> 


<div class="panel" id="panel-services"> 
<ul class="cycle-services cycle"> 

<li> 
<div class="columnServicesintro"> 
<p>This is 1st Section</p> 
</div> 
</li> 

<li> 
<div class="columnServices"> 
<p>This is 2nd Section</p> 
</div> 
</li> 

<li> 
<div class="columnServices"> 
<p>This is 3rd Section</p> 
</div>     
</li> 

</ul> 
</div> 

這是jQuery的：

function cycle() { 


    // Services Cycle. 
    var $cycleServices = $(".cycle-services"); 

    // The paging. 
    $cycleServices 
     .before('<ul class="cycle-services-pager" />'); 

    // Let's put in the next button. 
    $cycleServices 
     .after("<div class='cycleServicesNext'>Next</div>"); 

    $cycleServices.cycle({ 
     fx:  "scrollHorz", 
     speed: 800, 
     easing: "easeOutExpo", 
     timeout: 0, 
     pager: ".cycle-services-pager", 
     next: ".cycleServicesNext", 
     prev: ".cycleServicesPrevious", 
     pagerAnchorBuilder: function(idx, slide) { 
     return '<li id="cycle-services-pager-' + idx + '">' + idx + '</li>'; 
     } 
    }); 

    // Resize Panel according to slide cycle selected. 
    var $panelServices = $("#panel-services"); 

    $("#cycle-services-pager-0") 
     .on("click", function() { 
     $panelServices 
      .animate({ "width" : "430px" }, 800, "easeOutExpo"); 
     }); 

    $("#cycle-services-pager-1") 
     .on("click", function() { 
     $panelServices 
      .animate({ "width" : "555px" }, 800, "easeOutExpo"); 
     }); 

    $("#cycle-services-pager-2") 
     .on("click", function() { 
     $panelServices 
      .animate({ "width" : "555px" }, 800, "easeOutExpo"); 
     }); 

    $("#cycle-services-pager-3") 
     .on("click", function() { 
     $panelServices 
      .animate({ "width" : "555px" }, 800, "easeOutExpo"); 
     }); 

    $("#cycle-services-pager-4") 
     .on("click", function() { 
     $panelServices 
      .animate({ "width" : "555px" }, 800, "easeOutExpo"); 
     }); 


    $(".cycleServicesNext") 
     .on("click", function() { 

     var thePanelID = $(".cycle-services-pager").find("li.activeSlide").text(); 

     if (thePanelID == 0) { 

      $panelServices 
       .animate({ "width" : "430px" }, 800, "easeOutExpo"); 

     } else { 

      $panelServices 
       .animate({ "width" : "555px" }, 800, "easeOutExpo"); 

     } 



     }); 


} 

Answer 1

可以觸發週期分頁第一頁按鈕。在這種情況下，你可以嘗試：

$("#nav-services").first().click(function(){ 
$(".cycle-services-pager li").first().click(); 
});