在週期添加暫停/恢復按鈕

Question

你好，我得到這個問題與Jquery循環上的暫停/恢復按鈕。

的pauseOnPagerHover工作，但不是如果我把一個暫停按鈕在

贊一個：

$("#pauseButton").click(function() { 
$("#slideshow").cycle("pause"); 
}); 

$("#resumeButton").click(function() { 
$("#slideshow").cycle("resume"); 
}); 

的index.html：

<a id="pauseButton" href="#">Pause</a> 
<a id="resumeButton" href="#">Resume</a> 

這是我slideshow.js腳本：

$slideshow = { 
     context: false, 
     tabs: false, 
     timeout: 4000,  // time before next slide appears (in ms) 
     slideSpeed: 2000, // time it takes to slide in each slide (in ms) 
     tabSpeed: 300,  // time it takes to slide in each slide (in ms) when clicking through tabs 
     fx: 'fade', // the slide effect to use 
     init: function() { 
      // set the context to help speed up selectors/improve performance 
      this.context = $('#slideshow'); 
      // set tabs to current hard coded navigation items 
      this.tabs = $('ul.slides-nav li', this.context); 
      // remove hard coded navigation items from DOM 
      // because they aren't hooked up to jQuery cycle 
      this.tabs.remove(); 
      // prepare slideshow and jQuery cycle tabs 
      this.prepareSlideshow(); 
     }, 
     prepareSlideshow: function() { 
      // initialise the jquery cycle plugin - 
      // for information on the options set below go to: 
      // http://malsup.com/jquery/cycle/options.html 
      $("div.slides > ul", $slideshow.context).cycle({ 
       fx: $slideshow.fx, 
       timeout: $slideshow.timeout, 
       speed: $slideshow.slideSpeed, 
       fastOnEvent: $slideshow.tabSpeed, 
       pager: $("ul.slides-nav", $slideshow.context), 
       pagerAnchorBuilder: $slideshow.prepareTabs, 
       before: $slideshow.activateTab, 
       pauseOnPagerHover: true, 
       pause: true 

      }); 
     }, 
     prepareTabs: function(i, slide) { 
      // return markup from hardcoded tabs for use as jQuery cycle tabs 
      // (attaches necessary jQuery cycle events to tabs) 
      return $slideshow.tabs.eq(i); 
     }, 
     activateTab: function(currentSlide, nextSlide) { 
      // get the active tab 
      var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context); 
      // if there is an active tab 
      if(activeTab.length) { 
       // remove active styling from all other tabs 
       $slideshow.tabs.removeClass('on'); 
       // add active styling to active button 
       activeTab.parent().addClass('on'); 
      } 
     } 
    }; 
    $(function() { 
     // initialise the slideshow when the DOM is ready 
     $slideshow.init(); 
    }); 

什麼補充，使其工作？

Answer 1

嘗試：

$("#pauseButton").click(function() { 
    $("#slideshow div.slides > ul").cycle("pause"); 
}); 

$("#resumeButton").click(function() { 
    $("#slideshow div.slides > ul").cycle("resume"); 
}); 

小提琴here