如何为Slideshow Gallery添加键盘方向键控制切换功能

Hey Dave, I’ve used that exact slideshow from W3Schools before, so adding keyboard control is straightforward—we just need to listen for arrow key presses and hook into the existing slide navigation functions. Here’s how to do it:

Step 1: Understand the Existing Code Structure #

First, confirm your slideshow uses the core functions from the tutorial:

• plusSlides(n): This function handles moving to the next (n=1) or previous (n=-1) slide.
• slideIndex: The global variable tracking the current slide position.

Step 2: Add the Keyboard Event Listener #

Add this code snippet at the end of your existing JavaScript (right after the showSlides function):

// Listen for keyboard arrow presses
document.addEventListener("keydown", function(event) {
  // Check which arrow key was pressed
  if (event.key === "ArrowLeft") {
    plusSlides(-1); // Go to previous slide
  } else if (event.key === "ArrowRight") {
    plusSlides(1); // Go to next slide
  }
});

Step 3: Full Integrated Script Example #

Here’s what your complete JavaScript will look like, combining the original slideshow code with the keyboard control:

<script>
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

// Keyboard arrow control
document.addEventListener("keydown", function(event) {
  switch(event.key) {
    case "ArrowLeft":
      plusSlides(-1);
      break;
    case "ArrowRight":
      plusSlides(1);
      break;
  }
});
</script>

How It Works #

• We’re using document.addEventListener("keydown") to capture all keyboard presses across the page.
• When the left arrow (ArrowLeft) is pressed, we call plusSlides(-1)—the same function triggered by clicking the "previous" button.
• When the right arrow (ArrowRight) is pressed, we call plusSlides(1)—matching the "next" button’s behavior.

Testing It Out #

Save your changes, load the page, and press the left/right arrow keys—your slideshow should switch exactly like it does when clicking the navigation buttons. No extra HTML or CSS changes needed!

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