Остановить слайд-шоу при наведении мыши на 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

Замечательный Аарон, высоко ценится ответ. Я только что проверил код и он отлично работает.

Можем ли мы изменить этот код дальше, и при наведении мыши на событие мы можем перейти к конкретному слайду? я имею в виду, используя тот же элемент "точка"? Точки представляют разные слайды, поэтому я хочу, чтобы, если пользователь запускал указатель мыши на событии на любой точке, слайд отображал этот определенный точечный элемент.

Answer 2

Несколько вещей. Во-первых, я бы предложил использовать 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