如何将 prev.next 函数添加到基于 JavaScript 中的数组的图片库？

Question

在图片库中，可以单击每张图片进行放大。放大图像的来源是从小图像的背景图像中接收的。我想为这些放大的图像创建一个上一个和下一个按钮。

我之前已经为一组具有单独 div 的图像完成了此操作。但是，我从来没有用数组做过。这是我的代码。

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");
var imgArr = Array.from(document.querySelectorAll('.img-container .img'));

imgArr.forEach(function(img) {
  img.onclick = function() {
    var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, '');
    modal.style.display = "flex";
    modalImg.src = backgroundImage;
  }
});

/* This is the part where I tried adding previous & next 
functions, but it doesn't work and it makes the close 
button not work either. */
/*
var prev = document.getElementsByClassName("prev");
var next = document.getElementsByClassName("next");
var index = 0;
imgArr[index] = modalImg.src;

next.addEventListener('click', nextImage);
function nextImage() {
  for (i = 0; i < 10; i++) {
    modalImg.src = imgArr[index + 1];
  }
}

previous.addEventListener('click', previousImage);
function previousImage() {
  for (i = 0; i < 10; i++) {
    modalImg.src = imgArr[index - 1];
  }
} 
*/

// add caption
var captionText = document.getElementById("caption");
// close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.img {
  display: block;
  width: 200px;
  height: 100%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.img-container {
  display: flex;
  height: 100px;
  min-height: 20rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  -o-object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 0.8rem;
  color: #777;
  font-weight: normal;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.prev:hover,
.next:hover {
  color: #000;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<div class="img-container">
  <div id="tehran" class="img" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)">
  </div>
  <div id="masuleh" class="img" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)">
  </div>
  <div id="zanjan" class="img" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
  </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Buttons -->
  <span class="close">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div id="caption"></div>
</div>

Answer 1

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");
var imgArr = Array.from(document.querySelectorAll('.img-container .img'));
var currentIndex = 0;

imgArr.forEach(function(img, i) {
  img.onclick = function() {
    currentIndex = i;
    var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, '');
    modal.style.display = "flex";
    modalImg.src = backgroundImage;
  }
});

var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];

next.addEventListener('click', nextImage);
function nextImage() {
  currentIndex = (currentIndex+1)%imgArr.length;
  var backgroundImage = imgArr[currentIndex].style.backgroundImage.slice(4, -1).replace(/"/g, '');
  modalImg.src = backgroundImage
}

prev.addEventListener('click', previousImage);
function previousImage() {
  currentIndex = (currentIndex+imgArr.length-1)%imgArr.length;
  var backgroundImage = imgArr[currentIndex].style.backgroundImage.slice(4, -1).replace(/"/g, '');
  modalImg.src = backgroundImage
  }

// add caption
var captionText = document.getElementById("caption");
// close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.img {
  display: block;
  width: 200px;
  height: 100%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.img-container {
  display: flex;
  height: 100px;
  min-height: 20rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  -o-object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 0.8rem;
  color: #777;
  font-weight: normal;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.prev:hover,
.next:hover {
  color: #000;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<div class="img-container">
  <div id="tehran" class="img" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)">
  </div>
  <div id="masuleh" class="img" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)">
  </div>
  <div id="zanjan" class="img" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
  </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Buttons -->
  <span class="close">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div id="caption"></div>
</div>

Answer 2

您可以跟踪当前点击的图像，稍后您可以 increment/decrement 您可以 select 来自 NodeList 图像的值：

请注意：您不需要Array.from()在返回的NodeList上实现forEach() 15=]:

尝试以下方式：

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll('.img-container .img');
var curSrc;
imgArr.forEach(function(img, i) {
  img.onclick = function() {
    var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, '');
    modal.style.display = "flex";
    modalImg.src = backgroundImage;
    curSrc = i;
  }
});

var prev = document.querySelector(".prev");
var next = document.querySelector(".next");


next.addEventListener('click', nextImage);
function nextImage() {;
  if(curSrc < imgArr.length - 1){
    curSrc++;
    modalImg.src = imgArr[curSrc].style.backgroundImage.slice(4, -1).replace(/"/g, '');
  }
}

prev.addEventListener('click', previousImage);
function previousImage() {
  if(curSrc>0){
    curSrc--;
    modalImg.src = imgArr[curSrc].style.backgroundImage.slice(4, -1).replace(/"/g, '');
  }
}

// add caption
var captionText = document.getElementById("caption");
// close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.img {
  display: block;
  width: 200px;
  height: 100%;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.img-container {
  display: flex;
  height: 100px;
  min-height: 20rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  -o-object-fit: contain;
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: auto;
  padding: 0.8rem;
  color: #777;
  font-weight: normal;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.prev:hover,
.next:hover {
  color: #000;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<div class="img-container">
  <div id="tehran" class="img" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)">
  </div>
  <div id="masuleh" class="img" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)">
  </div>
  <div id="zanjan" class="img" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
  </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Buttons -->
  <span class="close">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div id="caption"></div>
</div>

如何将 prev.next 函数添加到基于 JavaScript 中的数组的图片库？

How to add prev.next function to an image gallery based on an array in JavaScript?

javascript

arrays

jquery

image-processing

image-gallery