Question

这个问题似乎很简单，但是我在退出问题答案时找不到答案，或者我可能听不懂。实际上，我正在像使用javascript和css的滑块一样更改图像，这是非常简单的脚本。 -但是我想做的一件事是，当我们将鼠标悬停在图像上时，图像更改/滑块应该停止，并且当我们从其中删除鼠标指针时，它应该像以前一样重新开始更改。以下是我用来创建此非常简单的图像更改/滑块代码的CSS，html和Java。

CSS：

.myRupSlides {display:none;}

HTML是：

<img class="myRupSlides" src="admgs/image-1.jpg" alt="Image-1">
<img class="myRupSlides" src="admgs/image-2.jpg" alt="Image-2">
<img class="myRupSlides" src="admgs/image-3.jpg" alt="Image-3">

而javascript代码是：

     <script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("myRupSlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>

一切正常，图像每4秒钟更改一次，但是我想如果将鼠标指针悬停在图像上，则图像更改应停止并且同一图像保持可见，直到我们将鼠标指针停留在图像上为止块。而且它应该像我们从图像中删除鼠标指针一样开始改变。我无法实现这一目标-请帮助我该怎么做...。抱歉，我的英语和语法不佳，并在此先感谢您的解决方案和帮助。

Answer 1

我相信是由于SetTimeout的原因，它会在4秒钟过去后继续执行

一种方法可以是删除将超时设置为全局变量并使用鼠标事件处理的方法

//Set the timeout inside a global variable 
 myTimeout = setTimeout(carousel, 4000); // Change image every 4 seconds

然后

//Clear timeout on mouse over
$('#silder').on('mouseenter',function(){
     clearTimeout(myTimeout); 
});

//start timeout again when mouse leaves
$('#silder').on('mouseleave',function(){
     myTimeout = setTimeout(carousel, 4000); 
});

如何在悬停时停止javascript for loop /功能

1 个答案: