如何为作品集网站的图片模态框添加键盘方向键切换功能？

Hey there! Let's get that keyboard arrow navigation working for your photo modal. Right now your code handles opening/closing the modal and ESC key support, but we just need to add a few bits to track the current image and cycle through them with arrow keys. Here's the updated code with clear explanations:

First, we'll add a variable to track the currently displayed image's index, update the click handler to set this index when an image is opened, then extend the keyboard event listener to handle left/right arrows and cycle through the images seamlessly.

Updated JavaScript Code #

<script>
var modal = document.getElementById('myModal');
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
let currentIndex = 0; // Track which image is currently displayed in the modal

// Open modal and set current image index when clicking a thumbnail
for (var i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', e => {
    modal.style.display = "block";
    // Convert HTMLCollection to array to find the clicked image's index
    currentIndex = Array.from(imgs).indexOf(e.target);
    modalImg.src = e.target.src;
    captionText.innerHTML = e.target.alt;
  });
}

// Close modal when clicking the X button
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
};

// Handle keyboard inputs: ESC to close, arrows to cycle images
document.onkeyup = function (e) {
  e = e || window.event;
  
  // ESC key (keyCode 27) - close the modal
  if(e.keyCode === 27) {
    modal.style.display = "none";
  } 
  // Left arrow (keyCode 37) - switch to previous image
  else if(e.keyCode === 37) {
    if (modal.style.display === "block") { // Only run if modal is open
      // Cycle to last image if we're at the first one
      currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
      updateModalContent();
    }
  }
  // Right arrow (keyCode 39) - switch to next image
  else if(e.keyCode === 39) {
    if (modal.style.display === "block") { // Only run if modal is open
      // Cycle to first image if we're at the last one
      currentIndex = (currentIndex + 1) % imgs.length;
      updateModalContent();
    }
  }
};

// Helper function to update modal image and caption (avoids code repetition)
function updateModalContent() {
  modalImg.src = imgs[currentIndex].src;
  captionText.innerHTML = imgs[currentIndex].alt;
}
</script>

Key Changes Breakdown #

• currentIndex variable: Keeps track of which image is active in the modal, so we know where to navigate next/previous.
• Click handler update: Converts the imgs HTMLCollection to an array to use indexOf, which sets currentIndex to the clicked image's position.
• Arrow key logic: Checks if the modal is open before running navigation code, and uses modulo arithmetic (%) to wrap around the image list (e.g., pressing right on the last image jumps to the first one).
• Helper function: updateModalContent reduces repeated code when switching images, making the code cleaner and easier to maintain.

This should let users cycle through all your photos using arrow keys while the modal is open—test it out, and you’ll have seamless keyboard navigation!

内容的提问来源于stack exchange，提问作者Валери К.