jQuery暫停/恢復事件後的週期問題（自定義尋呼機）

Question

我正在使用jQuery循環播放幻燈片。我無法更改給定的html代碼，並且pager中的元素（li html元素如下所示）必須暫停並恢復mouseover和mouseout事件上的幻燈片顯示。

該行爲已實施，但當幻燈片暫停並重新開始時，圖像開始每秒更改一次（？），然後以隨機間隔 - 而我指定了5秒的超時時間。

任何人都知道什麼似乎是造成這個問題，並經過一個週期（'簡歷'）幻燈片開始改變圖像無視超時我已經設置？

下面是HTML代碼（我不能改變）：

<div class="inner homeSlider"> 
    <div class="img-wrap"> 
    <!-- image list for the slideshow --> 
    <a href="http://asdasd" target="_self"> 
    <img src="image1.jpg" alt="" border="0" /> 
    </a> 

     <a href="http://www.google.com" target="_self"> 
     <img src="image2.jpg" alt="" border="0" /> 
    </a> 

     <a href="http://www.atcom.gr" target="_blank"> 
    <img src="image3.jpg" alt="" border="0" /> 
    </a> 
    </div> 


    <-- following elements will have to be used as the 'pager' for jquery cycle --> 
    <ul class="feature"> 
     <li id="hSlider-1" class="selected"> 
      <dl> 
      <dt><a href="http://example.com" target="_self">PAGE 1</a></dt> 
      <dd><a href="http://example.com" target="_self">some text</a></dd> 
      </dl> 
     </li> 
     <li id="hSlider-2" class="selected"> 
      <dl> 
      <dt><a href="http://www.google.com" target="_self">PAGE 2</a></dt> 
      <dd><a href="http://www.google.com" target="_self">some text</a></dd> 
      </dl> 
     </li> 

       <li id="hSlider-3" class="selected"> 
      <dl> 
      <dt><a href="http://www.google.com" target="_blank">PAGE 3</a></dt> 
      <dd><a href="http://www.google.com" target="_blank">some text</a></dd> 
      </dl> 
     </li> 
    </ul> 
</div> 

JavaScript的

var cycleTimeOut = 5000; 
    var cycleSpeed = 500; 
    var ispaused = false; 

    function setSelectedPager(slideIndex){ 
      var idStr = 'hSlider-' + (slideIndex+1); 
      $('div.homeSlider ul.feature li').removeClass('selected'); 
      $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected'); 
    } 

    function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
     if(!isNaN(options.currSlide) && !ispaused) {  
      setSelectedPager(options.currSlide);    
     } 
    } 

    var jqcycle = $('div.homeSlider div.img-wrap').cycle({ 
    fx:'fade', 
    speed:cycleSpeed, 
    timeout:cycleTimeOut, 
    pause:1, 
    after:aftercallBack 
    }); 

    /* On mouse over/out the pager must pause/resume the slide show and set the 
     appropriate CSS class 
    */ 
    $('div.features div.homeSlider ul.feature li').mouseover(function(e){ 

      var id = $(this).attr('id'); 
      var parts = id.split('-'); 
      var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1; 

      if(!ispaused){ 
       $('div.homeSlider div.img-wrap').cycle('pause');     
       $('div.homeSlider div.img-wrap').cycle(slideIndex-1);  
       setSelectedPager(slideIndex); 
       ispaused = true; 
      } 
    }); 

    $('div.features div.homeSlider ul.feature li').mouseout(function(e){ 

      var id = $(this).attr('id'); 
      var parts = id.split('-'); 
      var slideIndex = (!isNaN(parts[1])) ? parts[1] : 1; 

      if(ispaused) { 
       $('div.inner ul.feature li#' + id).removeClass('selected'); 
       $('div.homeSlider div.img-wrap').cycle('resume'); 

       ispaused = false; 
      } 
    }); 

Answer 1

我不知道它是否直接導致你的時間的問題，但我想你可能您的toggleClass和removeClass正在執行的順序有問題。我會嘗試將當前幻燈片作爲您的aftercallBack中標識的變量傳遞：

function aftercallBack(currSlideElement, nextSlideElement, options, forwardFlag) { 
    if(!isNaN(options.currSlide) && !ispaused) {  
     var toRemove = $(".selected"); 
     setSelectedPager(options.currSlide, toRemove);    
    } 
} 

function setSelectedPager(slideIndex, removeFrom) { 
    var idStr = 'hSlider-' + (slideIndex+1); 
     removeFrom.removeClass('selected'); 
     $('div.homeSlider ul.feature li#' + idStr).toggleClass('selected'); 
}