无需jQuery实现JavaScript图片切换：解决按钮越界报错与失效问题

你的代码核心问题是条件判断逻辑错误，导致按钮无法正常工作或触发资源不存在错误，以下是纯原生JS的修复方案：

错误分析 #

1. 上一张按钮失效：prevImg里的条件index >= filePath.length && index <= 0是矛盾的，一个数不可能同时大于等于数组长度（9）又小于等于0，所以这个条件永远不成立，函数内部代码根本不会执行。
2. 下一张按钮越界：nextImg的条件index <= filePath.length允许索引增加到等于数组长度（9），但数组的最大有效索引是filePath.length - 1（8），此时filePath[9]不存在，就会触发net::ERR_FILE_NOT_FOUND错误。

修复后的代码 #

let filePath = ["img/frame/1.png", "img/frame/2.png", "img/frame/3.png", "img/frame/4.png", "img/frame/5.png", "img/frame/6.png", "img/frame/7.png", "img/frame/8.png", "img/frame/9.png"]

let imgResultEl = document.getElementById("img-result-el")
let prevBtnEl = document.getElementById("prev-btn-el")
let nextBtnEl = document.getElementById("next-btn-el")
let index = 0

// 初始化显示第一张图片
imgResultEl.src = filePath[index]

let prevImg = () => {
  // 只有当索引大于0时，才允许切换上一张
  if (index > 0) {
    index--
    imgResultEl.src = filePath[index]
  }
}

let nextImg = () => {
  // 只有当索引小于数组最大有效索引时，才允许切换下一张
  if (index < filePath.length - 1) {
    index++
    imgResultEl.src = filePath[index]
  }
}

prevBtnEl.addEventListener("click", prevImg)
nextBtnEl.addEventListener("click", nextImg)

关键修改点 #

• 新增初始化图片加载：页面加载时直接显示第一张图，避免初始状态下图片为空。
• 修正prevImg的条件：改为index > 0，确保索引不会变成负数。
• 修正nextImg的条件：改为index < filePath.length - 1，确保索引不会超出数组的有效范围。

内容的提问来源于stack exchange，提问作者Raymond Sam Chia