在Javascript中将鼠标悬停在幻灯片上

Question

我正在使用以下 java 脚本进行幻灯片放映，现在我想在元素“点”上的鼠标悬停事件上暂停循环，我的 java 专业知识为零，请帮助。

 <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        for (i = 0; i < dots.length; i++) {
           dots[i].className = dots[i].className.replace("active","");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 5000); // Change text every 5 seconds
    }
</script>

Answer 1

一些事情。首先，我建议改用setInterval()。这使您可以轻松地在函数之外停止计时器。语法与setTimeout() 相同。 setInterval() 与setTimeout() 非常相似，只是它会继续执行函数（第一个参数），直到您调用clearInterval()。

注意setInterval()（和setTimeout()）返回一个值，可以分别用于clearInterval()和clearTimeout()。

更改代码以使用 setInterval 应该相当简单。鉴于您在上面发布的内容，它可能看起来像这样：

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace("active","");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds

请注意，我将interval 保存为一个变量，以后可以使用它来停止计时器。

完成此更改后，您的主要问题的解决方案将变得更加容易。您可以通过添加以下内容来设置事件处理程序：

function pauseSlides(event)
{
    clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides(event)
{
    interval = setInterval(showSlides, 5000);
}
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
   dots[i].onmouseover = pauseSlides;
   dots[i].onmouseout = resumeSlides;
}

鉴于上述情况，您的整个代码现在可能看起来像这样：

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace("active","");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds

// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
   dots[i].onmouseover = pauseSlides;
   dots[i].onmouseout = resumeSlides;
}

function pauseSlides()
{
    clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides()
{
    interval = setInterval(showSlides, 5000);
}
</script>

另外，供参考：

setInterval() 参考：https://www.w3schools.com/jsref/met_win_setinterval.asp

JavaScript 中的事件：https://www.w3schools.com/jsref/dom_obj_event.asp

Answer 2

很棒的 Aaron，非常感谢您的回复。我刚刚检查了代码并且它工作得很好。

我们能否进一步修改此代码并在鼠标悬停事件时转到特定幻灯片？我的意思是使用相同的“点”元素？这些点代表不同的幻灯片，因此我希望如果用户在任何点上触发鼠标悬停事件，则幻灯片显示在该特定点元素的下方。