支持手动切换的JS自动轮播图点击按钮后定时器重置问题求助

问题根源 #

当前代码没有存储自动轮播的定时器ID，手动切换时无法清除正在等待执行的定时任务，且指示点点击函数没有同步更新全局轮播索引，会同时出现手动切换后快速跳转、后续自动轮播索引错位两个问题。另外原自动轮播函数内注释了指示点激活逻辑，会导致自动轮播时底部指示点不同步高亮。

修复步骤 #

1. 新增全局变量存储定时器ID，每次设置定时任务时保存ID
2. 所有手动切换函数执行完成后，清除现有定时器并重新开启计时，实现倒计时重置
3. 修复指示点点击函数未同步全局轮播索引的隐藏问题
4. 恢复自动轮播函数内的指示点激活逻辑

修改后完整代码 #

var slideIndex = 0;
var slides, dots;
// 新增全局变量存储定时器ID
var slideTimer;
showSlides();

// 手动轮播切换按钮对应的处理函数
function plusSlides(position) {
  slideIndex += position;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  } else if (slideIndex < 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";
  // 清除现有定时器，重新开启自动轮播计时
  clearTimeout(slideTimer);
  slideTimer = setTimeout(showSlides, 5000);
}

// 轮播图下方指示点的点击触发函数
function currentSlide(index) {
  // 同步更新全局轮播索引，修复隐藏的索引错位问题
  slideIndex = index;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  } else if (slideIndex < 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";
  // 清除现有定时器，重新开启自动轮播计时
  clearTimeout(slideTimer);
  slideTimer = setTimeout(showSlides, 5000);
}

// 自动轮播处理函数
function showSlides() {
  var i;
  slides = document.getElementsByClassName("hero-slides");
  dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  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";
  // 存储定时器ID
  slideTimer = setTimeout(showSlides, 5000);
}

可选优化 #

可以把轮播图状态更新的重复逻辑抽成公共函数，减少冗余代码，后续修改状态更新逻辑只需要改一处即可。

内容的提问来源于stack exchange，提问作者Fillson