幻燈片：停止執行，如果鼠標移動

Question

的jQuery 3.2.1

這是一個照相館。 在HTML中有一個id =「forward」的元素。可以用手點擊。

我想組織一個幻燈片：等待某個 時期，然後點擊通過JavaScript轉發元素。

下面的代碼執行此任務：

$(document).ready(function() { 
    let pause = 3000; // ms 

    function change_frame(){ 
     let $forward_elem = $("#forward"); 
     try { 
      $forward_elem[0].click(); 
     } 
     catch(TypeError){ 
      alert("The end!"); 
     } 
    } 

    setTimeout(
     function(){ 
     change_frame(); 
     }, pause); 

}); 

但我想添加一些功能。也就是說：如果鼠標移動了， 不會執行任何JavaScript操作。

在這種情況下，用戶只需按下自己（手動）元素。下一頁將再次開始倒計時。換句話說：如果不觸摸鼠標，幻燈片ID會自動進行。

你能幫我嗎？

Answer 1

可以聲明一個全局變量像

var autoPresent = true

，然後有它設置爲false一種功能，當鼠標移動：

$(document).mousemove(function(event) { 
    autoPresent = false; 
}); 

，然後此驗證添加到您的change_frame功能

function change_frame(){ 
     if (!autoPresent) 
      return; 

     let $forward_elem = $("#forward"); 
     try { 
      $forward_elem[0].click(); 
     } 
     catch(TypeError){ 
      alert("The end!"); 
     } 
    } 

並將其設置爲bac k autoPresent = true你想在哪裏。

但

，如果你不想 「autoPresent」 了，只是刪除了明確的超時：

• 添加一個全局變量，像var nextSlide

• 設置你的超時到這個變量：nextSlide = setTimeout(function(){change_frame();}, pause);

• 當鼠標移動時清除它：

  $(document).mousemove(function(event) { 
      clearTimeout(nextSlide) 
  });