JavaScript图片轮播整合自动播放与箭头控制异常修复

两个问题都是代码逻辑拆分混乱、定时器冲突导致的：

• 自动轮播逻辑写在了孤立的匿名代码块中，没有和showSlides主逻辑整合，和手动箭头控制的索引计算完全脱节，直接导致上一页按钮的索引判断被异常覆盖失效。
• 所有切换操作都没有清除已存在的延时定时器，多次触发切换后会同时运行多个轮播定时器，直接造成切换速度变快、跳页的问题。
• 原HTML代码缺失轮播容器的开标签，存在DOM结构错误。

JavaScript 部分 #

let slideIndex = 1;
// 存储定时器实例，用于清除重复定时任务
let slideTimer = null;
// 初始化渲染第一张轮播图
showSlides(slideIndex);

// 箭头按钮切换逻辑
function plusSlides(n) {
  // 手动触发切换前先清空未执行的定时任务，避免多定时器冲突
  clearTimeout(slideTimer);
  showSlides(slideIndex += n);
}

function showSlides(n) {
  let i;
  const slides = document.getElementsByClassName("mySlides");
  // 轮播边界判断
  if (n > slides.length) slideIndex = 1;
  if (n < 1) slideIndex = slides.length;

  // 隐藏所有轮播项
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 展示当前索引对应的轮播项
  slides[slideIndex - 1].style.display = "block";

  // 统一处理自动轮播逻辑，每次切换后重置2秒定时
  clearTimeout(slideTimer);
  slideTimer = setTimeout(() => {
    slideIndex++;
    showSlides(slideIndex);
  }, 2000);
}

HTML 部分 #

<div class="slideshow-container">
  <div class="mySlides">
    <div class="numbertext">1 / 3</div>
    <img src="images/queri 1.png" style="width:100%">
    <div class="text">queri 1</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 3</div>
    <img src="images/queri 2.png" style="width:100%">
    <div class="text">queri 2</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 3</div>
    <img src="images/QUERI 3.png" style="width:100%">
    <div class="text">queri 3</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

• 删除原代码中孤立的匿名自动轮播块，把自动轮播逻辑整合到showSlides主函数内，手动、自动切换共用同一套索引计算规则，彻底解决索引混乱导致的按钮失效问题。
• 所有切换操作触发前都先清除已有定时器，保证同一时间只有一个轮播定时任务在运行，解决多定时器冲突导致的跳页、变速问题。
• 补全原HTML缺失的轮播容器开标签，修正DOM结构错误。

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