当用户使用javascript按下键盘箭头键时如何更改图像

Question

所以我有这个画廊。当用户在模式弹出后按下箭头键时，我需要更改图像。左箭头键改变图像在左和右箭头键为右。我对javascript很陌生，所以如果你能帮助我，那就太好了。全文请看代码sn-p。

function openModal() {
            document.getElementById("myModal").style.display = "block";
          }
          function closeModal() {
            document.getElementById("myModal").style.display = "none";
          }
          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("demo");
            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";
          }

    .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;
    }
   .mySlides {
      display: none;
    }

    .cursor {
      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;
    }

 <div class="main-container">
    <div class="row">
      <div class="column">
        <p align="center"><img src="https://source.unsplash.com/collection/190727/300x200" width="250" height="164"
            onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
      </div>
      <div class="column">
        <p align="center"><img src="https://source.unsplash.com/collection/190727/300x210" width="250" height="164"
            onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
      </div>
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span class="close cursor" onclick="closeModal()">&times;</span>
          <div class="mySlides">
            <img src="https://source.unsplash.com/collection/190727/300x200" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
          </div>
          <div class="mySlides">
            <img src="https://source.unsplash.com/collection/190727/300x210" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
          </div>
          <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>

Answer 1

要检测箭头键按下，您可以添加 keydown 事件监听器并检查键码。 左箭头键的键码是 37，右箭头键的键码是 39。

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {
    // Left arrow key is pressed
  } else if (e.keyCode === 39) {
    // Right arrow key is pressed
  }
});

Answer 2

Tanvi Naik 是对的，通过他的解决方案，您可以轻松创建工作画廊：

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {

    // Left arrow key is pressed
    plusSlides(-1)

  } else if (e.keyCode === 39) {

    // Right arrow key is pressed
    plusSlides(1)
  }
});

完整的sn-p

function openModal() {
  document.getElementById("myModal").style.display = "block";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
}
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("demo");
  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";
}


/* ADDED THIS: */
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {

    // Left arrow key is pressed
    plusSlides(-1)

  } else if (e.keyCode === 39) {

    // Right arrow key is pressed
    plusSlides(1)
  }
});

.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;
}

.mySlides {
  display: none;
}

.cursor {
  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;
}

<div class="main-container">
  <div class="row">
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/300x200" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
    </div>
    <div class="column">
      <p align="center"><img src="https://source.unsplash.com/collection/190727/300x210" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
    </div>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/300x200" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        </div>
        <div class="mySlides">
          <img src="https://source.unsplash.com/collection/190727/300x210" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
        </div>
        <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </div>