javascript - 将鼠标悬停在 JavaScript 幻灯片上时暂停

Question

好的，我正在制作这张幻灯片，但我似乎无法让它在鼠标悬停时暂停并在鼠标移出时恢复。 "Image slideshow with navigation buttons"这是幻灯片完整代码的链接。任何帮助都会很棒，下面的代码是我尝试让它在鼠标悬停时暂停的代码。

var animate = setTimeout("swapImage()",5000);

function pause() { 
    clearTimeout(animate); 
}

function resume() { 
    setTimeout("swapImage()",5000); 
}

Answer 1

首先一些有关 JavaScript 中计时器的一般信息:

计时器总是生成一个 ID。当您调用 setTimeout 或 setInterval 时，这些 native 函数会返回一个计时器 ID。在第一个声明中，此计时器 ID 存储在 animate 中:

var animate=setTimeout("swapImage()",5000);

但是，当您调用 clearTimeOut 时，animate 中存储的计时器会被清除。当您再次调用 setTimeOut 时，您需要存储新的 id。

 function resume(){ animate = setTimeout(swapImage,5000);}

但是，每次想要延迟执行时都需要调用setTimeout。 setTimeout 使用 n 延迟语句的执行，其中 n 是以毫秒为单位的时间。 setInterval 在 n 毫秒后再次重复该语句。

<小时/>

根据链接中的代码，我注意到函数 swapImage 每次调用时都会设置 setTimeout。

function swapImage(){ 
  var el = document.getElementById("mydiv"); 
  el.innerHTML=caption[i]; 
  var img= document.getElementById("slide"); 
  img.src= image[i]; 
  if(i < k ) { i++;}  
  else  { i = 0; } 
    animate = setTimeout("swapImage()",5000); 
  } 

我已将 animate 添加到该函数中。这应该根据链接中发布的代码来实现。除了下面的代码。

document.getElementById("slideContainer").addEventListener("mouseover", pause, false); //attach event handlers
document.getElementById("slideContainer").addEventListener("mouseout", resume, false);

function pause() { 
    clearTimeout(animate); 
}

function resume() { 
   animate = setTimeout("swapImage()",5000); 
}

这段代码将两个事件处理程序(mouseover 和 mouseout)附加到您的表。当有人将鼠标悬停在表格上时，会触发 mouseover 事件并执行 pause 函数。 mouseout 触发resume。您还需要更新您的 html。需要为表设置 id。

<table id="slideContainer" style="border:none;background-color:transparent;">