Как остановить слайд-шоу при наведении курсора мыши в java-скрипте

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

var slideIndex = 1;
var timer = null;
showSlides(slideIndex);

function plusSlides(n) {
    clearTimeout(timer);
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    clearTimeout(timer);
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n==undefined){n = ++slideIndex}
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    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";
    timer = setTimeout(showSlides, 5000);
}

$("#slideshow-container").mouseenter(function () {
    clearInterval(mySlides);
});

$(function () {



    $("#slideshow-container").click(function () {
        $("#slideshow-container").stop();
    })


})

и эта ссылка - мой код с css и html, возможно, поможет. http://jsfiddle.net/3kspho6g/2/

clearInterval(mySlides); Вы не устанавливаете ни интервал, ни присвоенную ему переменную mySlides.

— 22.07.2018 10:12

javascript html css

22.07.2018 10:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

424

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы используете setTimeout, вам нужно использовать clearTimeout, и значение должно быть вашим таймером:

$("#slideshow-container").mouseenter(function () {
    clearTimeout(timer);
});

22.07.2018 10:44

Ответ принят как подходящий

Пожалуйста, попробуйте решение ниже

Обновленный Javascript

<script type = "text/javascript">
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
    clearTimeout(timer);
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    clearTimeout(timer);
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n==undefined){n = ++slideIndex}
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    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";
    timer = setTimeout(showSlides, 2000);
}
function stopShow(timer) {  
    clearInterval(timer);
}

function startShow() {
    timer = setTimeout(showSlides, 2000);
}
$(function() {
    $('.slideshow-container').hover(function() {
        stopShow(timer);
    }, function() {
        timer = setTimeout(showSlides, 2000);
    });
});

</script>

HTML

<div class = "slideshow-container">

    <div class = "mySlides fade">
        <div class = "numbertext">1 / 4</div>
        <img src = "https://drawingsdaily.com/wp-content/uploads/2018/06/forms-of-abstract-art-41-best-abstract-paintings-in-the-world-inspirationseek.jpg" style = "width:100%;height:400px">

    </div>

    <div class = "mySlides fade">
        <div class = "numbertext">2 / 4</div>
        <img src = "https://drawingsdaily.com/wp-content/uploads/2018/05/watercolor-painting-art-50-best-watercolor-paintings-from-top-artists-around-the-world.jpg" style = "width:100%;height:400px">

    </div>

    <div class = "mySlides fade">
        <div class = "numbertext">3 / 4</div>
        <img src = "https://www.painterartist.com/static/ptr/product_content/painter/2018/bob-ross/gallery/08.jpg" style = "width:100%;height:400px">

    </div>

    <div class = "mySlides fade">
        <div class = "numbertext">4 / 4</div>
        <img src = "https://afremov.com/images/product/image_427.jpeg" style = "width:100%;height:400px">

    </div>

    <a class = "prev" onclick = "plusSlides(1)">&#10094;</a>
    <a class = "next" onclick = "plusSlides(-1)">&#10095;</a>

</div>


<div style = "text-align:center" class = "dot1">

    <span class = "dot" onclick = "currentSlide(1)"></span>
    <span class = "dot" onclick = "currentSlide(2)"></span>
    <span class = "dot" onclick = "currentSlide(3)"></span>
    <span class = "dot" onclick = "currentSlide(4)"></span>
</div>

CSS Как и есть

Надеюсь на эту помощь!

Я тестировал с помощью firefox и chrome, не могли бы вы выполнить жесткое обновление и проверить

— 22.07.2018 12:11

22.07.2018 11:12