求助修复JavaScript图片轮播中圆点按钮的不同步及加速问题

问题根源 #

1. 每次调用showDivs都会创建新定时器，点击圆点后多个定时器同时运行，导致切换加速。
2. 鼠标悬停的stop()/start()函数逻辑错误，根本没操作轮播定时器。
3. showDivs内部索引处理混乱，自动递增索引的逻辑和手动切换逻辑冲突，导致圆点和图片不同步。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<style>
#slideshow_container {display: inline-block; max-width: 800px; max-height: 320px; position: relative;}
#slideshow_nav {position: absolute; z-index: 2; top: 0; width: 100%; height: 100%;}
.mySlides {display: none; width: 100%; height: auto; max-height: 320px;}
#arrow-left {text-align: right;}
#arrow-right {text-align: left;}
.dots {z-index: 3; height: 13px; width: 13px; padding: 0; display: inline-block; border-radius: 100%; background: #ffffff; border: 1px solid #000000; cursor: pointer; margin: 0 5px;}
.dots-red {background: #ff0000; border: 1px solid #ff0000;}
#arrow-left, #arrow-right {cursor: pointer; color: #F00; font-size: 24px;}
</style>

<body>
 <div id="slideshow_container" onmouseover="stop()" onmouseout="start()">
  <img class="mySlides" src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg">
  <img class="mySlides" src="https://www.stockvault.net/data/2007/03/01/102413/preview16.jpg">
  <img class="mySlides" src="https://image.shutterstock.com/image-photo/da-lat-vietnam-sun-rise-600w-440121226.jpg">

   <table id="slideshow_nav" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="middle" width="40px"><div id="arrow-left" onclick="plusDivs(-1)">&#10094;</div></td>
    <td align="center" valign="bottom" style="padding-bottom:10px;">
        <span class="dots" onclick="currentDiv(0)"></span>
        <span class="dots" onclick="currentDiv(1)"></span>
        <span class="dots" onclick="currentDiv(2)"></span>
     </td>
    <td valign="middle" width="40px"><div id="arrow-right" onclick="plusDivs(1)">&#10095;</div></td>
  </tr>
</table>

<script>
let slideTimer;
let currentSlideIndex = 0;
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dots");

// 初始化轮播
showSlide(currentSlideIndex);
start();

function stop() {
  clearTimeout(slideTimer);
}

function start() {
  stop(); // 先清除旧定时器，避免叠加
  slideTimer = setTimeout(nextSlide, 2000);
}

function plusDivs(n) {
  showSlide(currentSlideIndex += n);
}

function currentDiv(n) {
  showSlide(currentSlideIndex = n);
}

function showSlide(index) {
  // 处理索引边界
  if (index >= slides.length) currentSlideIndex = 0;
  if (index < 0) currentSlideIndex = slides.length - 1;

  // 隐藏所有图片，重置圆点样式
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].classList.remove("dots-red");
  }

  // 显示当前图片，标记对应圆点
  slides[currentSlideIndex].style.display = "block";
  dots[currentSlideIndex].classList.add("dots-red");
}

function nextSlide() {
  plusDivs(1);
  start();
}
</script>

</body>
</html>

关键修复点 #

• 定时器管理：新增slideTimer变量存储定时器ID，stop()清除定时器，start()重新创建定时器，避免点击圆点后多个定时器同时运行导致加速。
• 索引逻辑重构：拆分索引处理和轮播逻辑，showSlide只负责显示指定索引内容，nextSlide负责自动切换，避免手动与自动切换的逻辑冲突。
• 圆点索引修正：将圆点currentDiv参数改为从0开始的索引，与图片数组索引对应，解决不同步问题。
• CSS优化：修正dots-red边框颜色（添加#），设置容器为相对定位让导航层自适应宽度，图片用百分比宽度适配容器，增加圆点间距提升交互体验。
• 悬停功能修复：stop()和start()现在正确操作定时器，鼠标悬停时暂停轮播，移出后恢复。

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