如何獲得此幻燈片以暫停鼠標懸停？

Question

我在JavaScript中幾乎沒用，所以我需要您的幫助，在此幻燈片中添加「暫停鼠標懸停」功能。

$(function() { 
    $('#cbp-fwslider').cbpFWSlider(); 
}); 

setInterval(function() { 
    if(jQuery('.cbp-fwnext').css('display') != 'none'){ 
     jQuery('.cbp-fwnext').click(); 
    } 
    else { 
     jQuery('.cbp-fwdots span:first-child').click(); 
    } 
}, 3000); 

我發現這個幻燈片here和我說下位（從其他用戶複製它），以允許其自動滾動，但我對如何讓它停留在鼠標懸停不知道。

請幫助任何人。

Answer 1

如果我正確理解您的代碼，您正在使用setInterval()模擬每3秒鐘點擊一下按鈕。因此，您可以通過讓一些代碼處理mouseenter和mouseleave事件來添加暫停，並設置一個isPaused變量，以便您在執行click()之前先測試現有代碼。假設你要懸停功能是在#cbp-fwslider元素：

$(function() { 
    var isPaused = false; 

    $('#cbp-fwslider').cbpFWSlider() 
         .on({ 
          mouseenter: function() { isPaused = true; }, 
          mouseleave: function() { isPaused = false; } 
         }); 

    setInterval(function() { 
     if (isPaused) return; // do nothing when paused 

     if(jQuery('.cbp-fwnext').css('display') != 'none') 
      jQuery('.cbp-fwnext').click(); 
     else 
      jQuery('.cbp-fwdots span:first-child').click(); 
    }, 3000); 
}); 

請注意，我搬到你的setInterval()代碼文檔準備好處理程序中讓isPaused可以準備處理程序中的局部變量而不是全局。

（的暫停上懸停功能簡單的演示沒有幻燈片：http://jsfiddle.net/1gf8z8yd/1/）