如何设置幻灯片自动轮播，点击翻页按钮后自动重置计时器？

本文共计732个文字，预计阅读时间需要3分钟。

在基于JavaScript的自动轮播幻灯片中，实现用户手动点击上一张或下一张按钮后，立即重置自动切换的5秒倒计时，避免计时器持续计时导致体验损坏。

在当前实现中，setInterval 每 5 秒触发一次 showNextImage()，但该定时器是独立运行的——无论用户是否手动操作，它都持续计时。这会导致一个常见问题：用户刚点完“下一张”，2 秒后幻灯片又自动切换，打断操作节奏。理想行为是：每次手动交互（prev/next）都应视为一次新的开始，重置整个自动轮播周期。

核心解决方案是 控制定时器生命周期：

• 将 setInterval 返回的定时器 ID 保存为变量（如 interval）；
• 在点击事件中，先调用 clearInterval(interval) 清除旧定时器；
• 再重新创建并赋值新定时器，从而实现“从零开始计时”。