按方向键切换Div幻灯片异常：右箭头直接跳至div-3的解决方法

云上老周

2026-6-26

问题分析与解决方案

问题根源

重复绑定键盘事件：若页面加载时div-2处于显示状态，第二个keydown事件会被绑定。当按下右箭头从div-1切换到div-2后，该绑定事件会立即检测到div-2已显示，进而触发div-2到div-3的切换逻辑，导致一次按键完成两次跳转。
逻辑冗余且耦合性高：每个幻灯片的切换逻辑独立编写，不仅增加维护成本，还容易因状态更新后的实时判断触发意外逻辑。
状态判断时机错误：原代码在事件触发过程中修改DOM状态后，后续的条件判断会基于更新后的状态执行，引发连锁反应。

修复后的代码

首先给所有幻灯片添加统一类名（如slide），简化选择逻辑：

<div id="div-1" class="slide" style="display:block;">幻灯片1</div>
<div id="div-2" class="slide" style="display:none;">幻灯片2</div>
<div id="div-3" class="slide" style="display:none;">幻灯片3</div>

JavaScript逻辑重构为统一的切换管理：

document.addEventListener("keydown", function(e) {
  // 获取所有幻灯片元素
  const slides = document.querySelectorAll(".slide");
  // 定位当前显示的幻灯片索引
  let currentIndex = -1;
  slides.forEach((slide, index) => {
    if (slide.style.display === "block") {
      currentIndex = index;
    }
  });

  // 右箭头（键码39）：切换到下一张
  if (e.keyCode === 39 && currentIndex !== -1 && currentIndex < slides.length - 1) {
    slides[currentIndex].style.display = "none";
    slides[currentIndex + 1].style.display = "block";
  }

  // 左箭头（键码37）：切换到上一张
  if (e.keyCode === 37 && currentIndex !== -1 && currentIndex > 0) {
    slides[currentIndex].style.display = "none";
    slides[currentIndex - 1].style.display = "block";
  }
});