悬停时暂停 Javascript 幻灯片

Pausing a Javascript slideshow on hoverover

本文关键字：幻灯片 Javascript 暂停 悬停      更新时间：2023-09-26

好的，所以我正在制作此幻灯片，我似乎无法让它在鼠标悬停时暂停并在鼠标退出时恢复。"带有导航按钮的图像幻灯片"这是幻灯片完整代码的链接。任何帮助都会很棒，下面的代码是我输入的，试图让它在鼠标悬停时暂停。

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

首先是关于 JavaScript 中计时器的一些一般信息：

计时器始终生成一个 ID。当您调用setTimeout或setInterval这些本机函数时，会返回一个timer 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 事件并执行 pause 函数。 mouseout发射resume.您还需要更新您的 html。需要为表设置id。

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

 var animate=setInterval(swapImage,5000); 
 function pause(){ clearInterval(animate);} 
 function resume(){ animate=setInterval(swapImage,5000);}

您发布的幻灯片库的链接建议采用以下 HTML 结构：

<table style="border:none;background-color:transparent;">
    <tr>
        <td>
            <img onclick="prev()" title="Previous" alt ="Prev" height="25" width="15"src="prev.jpg"/> 
        </td>
        <td> 
            <img name="slide" id="slide" alt ="my images" height="285" width="485" src="image-1.png"/> 
        </td> 
        <td>
            <img onclick="next()" title="Next" alt ="Next" height="25" width="15" src="next.jpg"/> 
        </td>
    </tr> 
    <tr> 
        <td></td>
        <td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
            <div id ="mydiv"></div>
        </td>
        <td></td>
    </tr>
</table>

假设此 HTML 结构，您需要将事件处理程序添加到包含整个幻灯片的 TABLE 标记（或包含整个幻灯片的其他标记）：

<table onmouseover="pause()" onmouseout="resume()" style="...">

编辑：@Mouser的回答提醒我另一个问题。您必须更改swapImage函数的源代码，以便可以访问超时 Id：

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; } 
    // Save timeout Id to implicitly declared global variable
    animate = setTimeout("swapImage()",5000); 
}
相关文章：