幻灯片：停止执行，如果鼠标移动

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