时间戳

首页 > 解决方案 > 我应该使用什么功能来使用左右箭头键更改图像

javascript - 我应该使用什么功能来使用左右箭头键更改图像

问题描述

我有一个画廊。图像，当用户在模式弹出后按下箭头键时，我需要更改图像。左箭头键将图像向左，右箭头键向右。我对 JavaScript 很陌生，所以我不明白应该使用什么函数来左右改变图像。

我试过了

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

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 37) {} else if (e.keyCode === 39) {}
});

标签： javascripthtmlcss

解决方案

  • 您可以创建一个包含要循环浏览的所有图像的数组。

  • 然后创建一个count变量来索引这个数组，使用 将remainder operator (%)它保持在范围内。

这就是它的样子：（使用leftArrow和rightArrow循环）

const imageElement = document.getElementById('image');
const images = ['https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.PhOSiFj5bJt_uNbE7uw18QHaEK%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.qazsMQBX3pgWM7efm52WGwHaE7%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.M1ZwTSJXeW4021AafDtf9gHaE7%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.Wmr6TCnknZHO2DPszEf2bwHaE8%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.TRm_imdlOXbV4bggHxIcuwHaDt%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.0_abpwaxZ_xpc0V8kVZWMwHaLI%26pid%3DApi&f=1', 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.PPTPdfKia0RZBpC91MOG5wHaHa%26pid%3DApi&f=1'];

let current = 700;
document.addEventListener('keydown', function (e) {
  if (e.code === "ArrowRight") current++
  else if (e.code == "ArrowLeft") current--
  imageElement.src = images[current % images.length];
  e.preventDefault()
});
<img id="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.PhOSiFj5bJt_uNbE7uw18QHaEK%26pid%3DApi&f=1">

注意：KeyboardEvent.keyCode已弃用。所以我把它换了KeyboardEvent.code。

推荐阅读