Question

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

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

但客户希望项目可以滑动。幸运的是我在w3（https://www.w3schools.com/howto/howto_js_slideshow.asp）

上找到了合适的滑块

最简单的我可以找到prev和next按钮，自动滑动和使用vanilla JS。您可以在使用滑块时浏览项目。内容只是在前台使用了一个小空间，项目图片取代了网站的整个背景。但它使用了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

啊，所以你需要更改代码以将超时存储到变量中，以便取消它。

var timer;
function showDivs (n) {
  /* the code */
  if (timer) clearTimeout(timer)
  timer = setTimeout(showDivs, 8000);
}

Answer 2

您需要清除在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
}

javascript滑块settimeout问题

2 个答案: