模态弹窗开启后如何通过键盘方向键切换图片画廊的展示图片

DevOps 小满

2026-10-5

你已经完成了键盘事件监听的基础逻辑，只需要补充轮播控制的核心函数、给键盘事件增加模态框显示状态的判断，直接复用按钮绑定的plusSlides函数就能实现需求：

完整实现代码

// 存储当前展示的幻灯片序号
let slideIndex = 1;

// 打开模态框
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

// 关闭模态框
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

// 跳转到指定序号的幻灯片
function currentSlide(n) {
  showSlides(slideIndex = n);
}

// 按偏移量切换幻灯片（上一张/下一张）
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// 控制幻灯片显隐的核心逻辑
function showSlides(n) {
  const slides = document.getElementsByClassName("mySlides");
  // 边界处理：超过总张数回到第一张，小于1跳到最后一张
  if (n > slides.length) slideIndex = 1
  if (n < 1) slideIndex = slides.length
  // 隐藏所有幻灯片后显示当前选中的
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}

// 改造后的键盘监听逻辑
document.addEventListener('keydown', function(e) {
  const modal = document.getElementById('myModal');
  // 仅当模态框处于打开状态时响应方向键
  if (modal.style.display !== 'block') return;

  switch (e.keyCode) {
    case 37:
      plusSlides(-1); // 左方向键触发上一张
      break;
    case 39:
      plusSlides(1); // 右方向键触发下一张
      break;
  }
});