如何使用JavaScript实现模态框弹出后按键盘方向键切换画廊图片

AI 小北

2026-10-6

实现方案

实现逻辑

新增键盘keydown事件全局监听
每次触发按键时先判断模态框是否处于打开状态，避免未打开模态框时误触发切换
识别按键编码：左方向键触发上一张，右方向键触发下一张，也可额外适配ESC键关闭模态框的常用交互

完整修改后的JavaScript代码

原有功能代码全部保留，只需新增末尾的键盘监听逻辑即可：

function openModal() {
  document.getElementById("myModal").style.display = "block";
}
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  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";
}

// 新增键盘事件监听代码
document.addEventListener('keydown', function(event) {
  const modal = document.getElementById('myModal');
  // 仅模态框打开时响应按键
  if (modal.style.display === 'block') {
    // 左方向键：上一张
    if (event.keyCode === 37) {
      plusSlides(-1);
    }
    // 右方向键：下一张
    if (event.keyCode === 39) {
      plusSlides(1);
    }
    // 可选：ESC键关闭模态框
    if (event.keyCode === 27) {
      closeModal();
    }
  }
});