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();
});