自定义幻灯片可在鼠标悬停时暂停

本文介绍了自定义幻灯片可在鼠标悬停时暂停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

大家好， 我设计了自己的幻灯片，可以循环显示javascript中的4种不同功能.每个函数都隐藏并显示容器div中的不同元素.这些函数的名称为: initial_slide(); second_slide(); third_slide(); four_slide(); 环形(); -此功能可让幻灯片连续播放. 这是我的代码:

Hi everyone, I have designed my own slideshow that cycles through 4 different functions in javascript. Each function hides and displays different elements within the container div. The functions are named: initial_slide(); second_slide(); third_slide(); fourth_slide(); loop(); - This function allows the slideshow to continuously go through. Here is my code:

function loop(){ initial_slide(); setTimeout(second_slide, 10000); setTimeout(third_slide, 20000); setTimeout(fourth_slide, 40000); setTimeout(loop, 50000); }; initial_slide(); setTimeout(second_slide, 10000); setTimeout(third_slide, 20000); setTimeout(fourth_slide, 40000); setTimeout(loop, 50000);

我的问题是，当鼠标悬停在容器div上时，如何暂停计时器，以使幻灯片停留在当前显示的幻灯片上?一旦执行mouseout功能，是否可以恢复计时器? 非常感谢您的帮助，

My question is, how can I pause the timer when the mouse goes over the container div, so that the slideshow stays on the slide it currently shows? And is it possible to resume the timer once the mouseout function is performed? Any help is much appreciated, Thanks.

推荐答案

setTimeout(loop, 50000);

函数返回JS中的对象.有clearTimeout函数将此对象作为参数. 因此，在事件处理程序mouseover上:

function returns an object in JS. There is clearTimeout function that take this object as parameter. So on event handler mouseover:

var timeout = setTimeout(loop, 50000); slideshow.onmouseover(function(){ clearTimeout(timeout); });

并在鼠标移出时:

And on mouse out:

slideshow.onmouseout(function(){ setTimeout(loop, 50000); });