使用原生JavaScript实现图片轮播：上一张功能修复方案

问题原因 #

你的prevSlide函数存在两个核心问题：

• 初始currentIndex为0，点击上一张时currentIndex--会变成-1，此时slides[currentIndex - 1]等价于slides[-2]，访问不存在的数组元素直接抛出类型错误
• 没有处理currentIndex小于边界值的逻辑，无法实现从第一张跳转到最后一张的循环

修复方案 #

修改prevSlide函数，添加边界判断逻辑：

1. 递减currentIndex后，检查是否小于1
2. 若小于1，将currentIndex重置为幻灯片的总数量，实现循环
3. 再通过currentIndex - 1获取正确的幻灯片索引（因为数组索引从0开始）

修正后的完整代码 #

JavaScript #

const container = document.querySelector(".div-container")
const nextBtn = document.querySelector(".next")
const prevBtn = document.querySelector(".previous")
let currentIndex = 0;

const nextSlide = () => {
  const slides = document.getElementsByClassName("slide")
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"
  }
  currentIndex++
  if (currentIndex > slides.length) {
    currentIndex = 1
  }
  slides[currentIndex - 1].style.display = "block"
}

nextSlide()

const prevSlide = () => {
  const slides = document.getElementsByClassName("slide")
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"
  }
  currentIndex--
  // 添加边界判断，实现循环
  if (currentIndex < 1) {
    currentIndex = slides.length
  }
  slides[currentIndex - 1].style.display = "block"
}

nextBtn.addEventListener("click", () => {
  nextSlide()
})

prevBtn.addEventListener("click", () => {
  prevSlide()
})

CSS #

.div-container {
  display: flex;
  justify-content: center;
  max-width: 1000px;
}

.slide {
  display: none;
}

.image {
  width: 300px;
}

HTML #

<body>
  <div class="div-container">
    <button class="previous">Previous</button>
    <div class="slide fade">
      <img src="https://i.redd.it/z7myrlhfhxr31.jpg" alt="windows xp autumn" class="image">
    </div>
    <div class="slide fade">
      <img src="https://www.newegg.com/insider/wp-content/uploads/windows_xp_bliss-wide.jpg" alt="windows xp bliss" class="image">
    </div>
    <div class="slide fade">
      <img src="https://i0.wp.com/tjkelly.com/wp-content/uploads/windows-xp-desktop-background-wallpaper-follow-800x600.jpg?ssl=1" alt="windows xp fishy" class="image">
    </div>
    <button class="next">Next</button>
  </div>
</body>

补充优化建议 #

• 可以把获取slides的操作提到函数外部，避免每次点击都重新查询DOM，提升性能
• 可以添加过渡动画让切换更流畅，利用已有的fade类，添加CSS过渡效果：

.slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide.active {
  display: block;
  opacity: 1;
}

然后修改JS中设置显示的逻辑，替换style.display为添加/移除active类。

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