Question

好的，所以我正在制作这个幻灯片，我似乎无法让它暂停鼠标悬停并继续鼠标移出。 "Image slideshow with navigation buttons"这是幻灯片显示完整代码的链接。任何帮助都会很棒，下面的代码就是我试图让它在鼠标悬停时暂停的原因。

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

function pause() { 
    clearTimeout(animate); 
}

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

Answer 1

 var animate=setInterval(swapImage,5000); 

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

Answer 2

首先介绍JavaScript中有关计时器的一般信息：

计时器始终生成一个id。当您致电setTimeout或setInterval时，这些原生函数会返回timer id。在第一个声明中，此计时器ID存储在animate：

中

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

但是，当您致电animate时，clearTimeOut中存储的计时器会被清除。当您再次致电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;">

Answer 3

您发布的幻灯片库的链接表明了这种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); 
}

在悬停时暂停Javascript幻灯片放映

3 个答案: