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

你可以通过监听键盘按键事件实现需求，仅需对原有代码做少量调整即可，同时修复了原有代码中ID重复的小问题：

修改说明 #

• 打开模态框时绑定键盘事件，关闭时解绑，避免全局触发按键逻辑
• 左方向键切换上一张，右方向键切换下一张，额外新增ESC键关闭模态框的常用交互
• 修复多个caption元素共用相同ID的问题，避免DOM获取异常

完整修改后代码 #

JavaScript代码 #

function openModal() {
  document.getElementById("myModal").style.display = "block";
  // 绑定键盘事件
  document.addEventListener('keydown', handleKeydown)
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
  // 解绑键盘事件
  document.removeEventListener('keydown', handleKeydown)
}

// 键盘事件处理
function handleKeydown(e) {
  // 左方向键 上一张
  if(e.keyCode === 37) {
    plusSlides(-1)
  }
  // 右方向键 下一张
  if(e.keyCode === 39) {
    plusSlides(1)
  }
  // ESC键关闭模态框
  if(e.keyCode === 27) {
    closeModal()
  }
}

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");
  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";
  // 取当前slide下的caption文本
  const currentCaption = slides[slideIndex - 1].querySelector('.caption').innerHTML;
  document.getElementById("modalCaption").innerHTML = currentCaption;
}

CSS代码（仅新增全局caption样式，其余保持不变） #

.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.mySlides {
  display: none;
}

.close {
  position: relative;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  left: 584px;
  top: 90px;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
}

.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
}

/* 新增全局caption展示容器样式 */
#modalCaption {
  padding-bottom: 7px;
  font-size: 17px;
  color: white;
  text-align: center;
  margin-top: 120px;
}

HTML代码（调整了caption结构避免ID重复） #

<tr>
  <div class="row">
    <div class="column">
      <td>
        <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" alt="Annual function"></p>
      </td>
    </div>
    <div class="column">
      <td>
        <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" alt="Annual function"></p>
      </td>
    </div>
</tr>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <p id="modalCaption"></p>
    <div class="mySlides">
      <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;position: relative;left: 10px;top: 109px;" alt="Annual function">
      <p class="caption" style="display:none;">Annual function</p>
    </div>

    <div class="mySlides">
      <img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%;position: relative;left: 10px;top: 109px;" alt="Annual function">
      <p class="caption" style="display:none;">Annual function</p>
    </div>
    <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

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