javascript slider 设置超时问题

Question

我目前正在为建筑师开发一个小型网站。我要实现的目标是使侧面尽可能简单。

因此，我将网站创建为单页网站。您可以浏览不同的子页面而无需重新加载，也无需使用 php。仅 HTML5 和 CSS3。

但是客户希望元素可以滑动。幸运的是我在 w3 ( https://www.w3schools.com/howto/howto_js_slideshow.asp ) 上找到了一个合适的 slider

是我能找到的最简单的上一个和下一个按钮，自动滑动和使用 vanilla JS。您可以在使用 slider 的同时浏览元素。内容只是在前景中使用了一个小空间，一个元素的图片取代了网站的整个背景。但它使用 setTimeout，这让我抓狂。

一切正常，只要用户不点击下一个或上一个按钮。十 幻灯片快要疯了。 (当然，这个问题很常见，stackoverflow 上有几个线程，但我找不到适合我的元素的答案!)

我尝试了一些东西，但我的 JavaScript 不是很好。

<script>
"use strict";
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
 showDivs(slideIndex += n);
}

function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
  if (n==undefined){n = ++slideIndex;}
 if (n > x.length) {slideIndex = 1;} 
 if (n < 1) {slideIndex = x.length;}
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none"; 
 }
 x[slideIndex-1].style.display = "block"; 
 setTimeout(showDivs, 8000); // Change image every 8 seconds
}
</script>

这是我目前使用的代码。每张幻灯片后有什么方法可以重置计时器吗？我已阅读有关 clearTimeout 的信息，但无法使其正常工作。

感谢任何帮助。谢谢大家。

Answer 1

您需要清除您在 showDivs 结束时设置的超时时间

<script>
"use strict";
var slideIndex = 1;
var timeOutId;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    // Stop the timeout from triggering.
    clearTimeout(timeOutId);

    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n==undefined){n = ++slideIndex;}
    if (n > x.length) {slideIndex = 1;} 
    if (n < 1) {slideIndex = x.length;}
    for (i = 0; i < x.length; i++) {
         x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
    // Schedule a new timeout.
    timeOutId = setTimeout(showDivs, 8000); // Change image every 8 seconds
}