自定义幻灯片可在鼠标悬停时暂停 [英] Custom slideshow to pause on mouseover

问题描述

大家好，

我设计了自己的幻灯片，可以循环显示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);
});

这篇关于自定义幻灯片可在鼠标悬停时暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！