HTML/CSS/JavaScript 幻灯片中的 setTimeout

Question

我有一个用 HTML/CSS/Javascript 制作的简单 slider

我的问题是我不知道如何制作一个简单的 setTimeout。 我的想法是，当您单击任何控制点时，幻灯片必须更改（这已经由我完成，并且按预期工作）。 但是计时器也需要在那里工作，因此该计时器必须每 4 秒更改一次活动幻灯片，如果单击控制点，计时器必须重置并再计数 4 秒。

这是我的代码

HTML

<div class="slideshow-container">
    <div class="slides">
        <div class="intro-slide fade">
            <h2>title</h2>
            <p>
                text
            </p>
        </div>
        <!--slide-->
        <div class="intro-slide fade">
            <h2>title</h2>
            <p>
                text
            </p>
        </div>
        <!--slide-->
        <div class="intro-slide fade">
            <h2>title</h2>
            <p>
                text
            </p>
        </div>
        <!--slide-->
    </div>
    <!--slides-->
    <div class="control-dots">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div>
    <!--control-dots
            </div>
            <!--slideshow-container -->

SCSS

.slideshow-container {
    width: 570px;
    h2 {
        font-weight: 800;
        font-size: 34px;
        line-height: 1.27;
        margin-bottom: 20px;
        font-family: 'Raleway';
    }
    .control-dots {
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        &:hover,
        &.active {
            background-color: #fff;
        }
    }
}

Javascript

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("intro-slide");
    var dots = document.getElementsByClassName("dot");
    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";
    setTimeout(showSlides, 4000); // Change image every 4 seconds
}

提前致谢

Answer 1

因此，如果它正在运行，请取消超时。 超时返回计时器的 id。 因此，您将其存储到变量中并取消它。

function plusSlides(n) {
  n = n || 1
  showSlides(slideIndex += n);
}

var activeTimer
function showSlides(n) {
    if (activeTimer) window.clearTimeout(activeTimer)
    // ...
    activeTimer = window.setTimeout(plusSlides, 4000);
}