JavaScript轮播图切换异常：反向切换时首次跳转方向错误问题

问题根因 #

• 错误使用后置递增/递减运算符：后置运算会先返回变量当前值参与赋值，再修改变量本身，导致imageNumber存储的数值和当前实际展示的图片序号不一致。比如连续点击下一张后，imageNumber会比当前展示的图片序号大1，此时点击上一张会先拿这个偏大的序号赋值图片路径，就出现了「先前进再后退」的异常。
• 边界校验顺序错误：你先修改了图片路径，再做越界判断，即使越界了，错误的路径已经被赋值给图片，会额外触发一次无效加载。
• 类选择器语法错误：document.querySelector("next")要选择类名需要加.前缀，应该写成document.querySelector(".next")，不过你代码里按钮用了onclick属性绑定事件，所以这个问题暂时没触发功能异常。

修正后的代码 #

JS部分 #

// 修正类选择器语法
const nextBtn = document.querySelector(".next");
const previousBtn = document.querySelector(".previous");
const image = document.getElementById("slideShow");
// 补充你实际的图片数组定义，原代码缺失该部分
const slideArray = [/* 你的图片资源列表 */]

let imageNumber = 0;
// 初始化展示第一张图
image.src = `slide-${imageNumber}.PNG`
console.log(image.src, imageNumber);

const slideForward = function () {
  // 先计算正确序号
  imageNumber++
  if (imageNumber > slideArray.length - 1) {
    // 如果你的第一张图序号是1就保留1，是0就改为0，按需调整
    imageNumber = 0;
  }
  // 再赋值图片路径
  image.src = `slide-${imageNumber}.PNG`;
  console.log(image.src, imageNumber);
};

const slideBack = function () {
  // 先计算正确序号
  imageNumber--
  if (imageNumber < 0) {
    imageNumber = slideArray.length - 1;
  }
  // 再赋值图片路径
  image.src = `slide-${imageNumber}.PNG`;
  console.log(image.src, imageNumber);
};

// 合并两个键盘监听事件，减少不必要的事件绑定
document.addEventListener("keydown", function (q) {
  if (q.key === "ArrowLeft") {
    slideBack();
  } else if (q.key === "ArrowRight") {
    slideForward();
  }
});

HTML注意事项 #

原HTML存在两处不影响功能的语法问题，可按需修正：一是<head>标签没有闭合，二是<main>标签没有开头就写了</main>，不符合HTML规范。

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