如何使用空格键进入此幻灯片的下一张幻灯片？答案

【问题标题】：How do I get to the next slide of this slideshow by using spacebar?如何使用空格键进入此幻灯片的下一张幻灯片？
【发布时间】：2022-01-20 03:11:33
【问题描述】：

我希望能够通过按空格键进入该幻灯片的下一张幻灯片，而无需单击箭头。我还希望能够使用左/右箭头键在幻灯片之间导航。有没有办法做到这一点？这是我正在使用的代码：⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

<html lang="en">
  <head>
    <div class="wrapper">
      <div class="content" role="main">
        <style>
          .slideshow-container {
            position: relative;
            background: #f1f1f1f1;
          }

          .mySlides {
            display: none;
            padding: 80px;
            text-align: center;
          }

          .prev,
          .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -30px;
            padding: 16px;
            color: #888;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
          }

          .next {
            position: absolute;
            right: 0;
            border-radius: 3px 0 0 3px;
          }

          .prev:hover,
          .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
          }

          h1 {
            font-size: 100px;
          }
        </style>
        <body>
          <div class="slideshow-container">
            <div class="mySlides">
              <h1>7x1=7</h1>
            </div>

            <div class="mySlides">
              <h1>7x2=14</h1>
            </div>

            <div class="mySlides">
              <h1>7x3=21</h1>
            </div>

            <div class="mySlides">
              <h1>7x4=28</h1>
            </div>

            <div class="mySlides">
              <h1>7x5=35</h1>
            </div>

            <div class="mySlides">
              <h1>7x6=42</h1>
            </div>

            <div class="mySlides">
              <h1>7x7=49</h1>
            </div>

            <div class="mySlides">
              <h1>7x8=56</h1>
            </div>

            <div class="mySlides">
              <h1>7x9=63</h1>
            </div>

            <div class="mySlides">
              <h1>7x10=70</h1>
            </div>

            <div class="mySlides">
              <h1>7x11=77</h1>
            </div>

            <div class="mySlides">
              <h1>7x12=84</h1>
            </div>

            <div class="mySlides">
              <h1>7x13=91</h1>
            </div>

            <div class="mySlides">
              <h1>7x14=98</h1>
            </div>

            <div class="mySlides">
              <h1>7x15=105</h1>
            </div>

            <div class="mySlides">
              <h1>7x16=112</h1>
            </div>

            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>

            <script>
              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");
                var 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";
              }
            </script>
          </div>
        </body>
      </div>
    </div>
  </head>
</html>```

【问题讨论】：

标签： html slideshow

【解决方案1】：

你应该添加事件监听器，例如

按空格键进入此幻灯片的下一张幻灯片：

<script>
  document.addEventListener("keyup", (event) => {
    if (event.code === "Space") {
      plusSlides(1);
    }
  });
</script>

使用左/右箭头键在幻灯片之间导航：

<script>
  document.addEventListener("keyup", (event) => {
    if (event.code === "ArrowLeft") {
      plusSlides(-1);
    } else if (event.code === "ArrowRight") {
      plusSlides(1);
    }
  });
</script>

奖励：您可以从这里检查所有 keyCode： https://keycode.info/

【讨论】：