JavaScript实现模态框弹出后按左右方向键切换图片应使用什么函数

你已经定义了点击切换的plusSlides方法，只需要补充基础轮播函数，再给键盘事件增加「模态框是否开启」的判断即可，完整实现逻辑如下：

第一步：补充基础轮播控制函数 #

你现有HTML中调用的openModal/closeModal/currentSlide/plusSlides函数需要先实现，在你的JS代码中添加以下内容：

// 存储当前幻灯片索引
let slideIndex = 1;

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

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

// 切换到指定索引的幻灯片
function currentSlide(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";
}

// 前后切换幻灯片
function plusSlides(n) {
  currentSlide(slideIndex += n);
}

第二步：完善键盘监听事件 #

需要先判断模态框是否处于打开状态，避免模态框未弹出时误触发切换，修改你的键盘事件代码如下：

document.addEventListener('keydown', function(e) {
  const modal = document.getElementById("myModal");
  // 仅当模态框显示时才响应方向键
  if (modal.style.display !== "block") return;

  // 左方向键：上一张
  if (e.key === 'ArrowLeft' || e.keyCode === 37) {
    plusSlides(-1);
  } 
  // 右方向键：下一张
  else if (e.key === 'ArrowRight' || e.keyCode === 39) {
    plusSlides(1);
  }
});

注：keyCode属性已被Web标准废弃，这里同时保留e.key的判断做兼容，现代浏览器都支持直接用按键名判断，可读性更高。

可选优化 #

你现有CSS中存在重复定义的问题，比如.mySlides、.cursor都写了两遍，可以删掉重复的规则减少冗余代码。

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