Question

我想在鼠标悬停时停止幻灯片放映，而在鼠标悬停时开始播放。我使用此代码，但是它不起作用，并且我无法解决问题。这是我的代码，如果有人帮助我，我将非常感谢。

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/

Answer 1

如果使用setTimeout，则需要使用clearTimeout，并且该值必须是您的计时器：

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

Answer 2

请尝试以下解决方案

更新的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不变

希望获得帮助！

如何在Java脚本中的鼠标上停止幻灯片放映

2 个答案: