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

很棒的亚伦，非常感激。我只是检查了代码并使其正常工作。

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

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

2 个答案: