我正在尝试制作一个图像幻灯片,它每10秒改变一次,但在底部有一个按钮,如果你点击这个点,它会把你带回那个图像。问题是当我点击按钮的时候,它加快了计时器的速度。如何停止此操作,以便当我单击该按钮时,它会重置计时器?
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if (slideIndex > slides.length) {slideIndex = 1}
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, 10000, slideIndex++); // Change image every 10 seconds
}
发布于 2018-06-22 04:43:24
感谢Teemu的评论。谁教我怎么做的,我把它应用到代码中,它就能工作了
function timer() {
this.STimer = setTimeout(showSlides, 10000, slideIndex++);
}
function cancelTimer(){
clearTimeout(this.STimer);
}
function currentDiv(n) {
cancelTimer();
showSlides(slideIndex = n);
}
function showSlides() {
var nextSlide = false
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if (slideIndex > slides.length) {slideIndex = 1}
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();
}
https://stackoverflow.com/questions/50976159
复制相似问题