Question

我正在尝试完成图像库的滑块，而我所缺少的只是prev / next按钮的功能。现在，上一个按钮正在工作，但是有一个问题。这是问题所在，我有一个图片库，当我单击它们时，会弹出一个弹出窗口，显示单击的图像。但是，如果我单击的不是阵列中的第一个图像，然后单击prev按钮，它将把我带回到阵列的最后一个图像，而prev按钮应该将我带回到上一个图像到被点击的那个

因此，如果我有10张图像，然后单击数组中索引为3的图像，然后单击上一个按钮，则弹出窗口应显示索引为2的图像。让我向您展示到目前为止我得到了什么：< / p>

<div class="gallery">
  <img src="img/hg-1.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-2.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-3.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-4.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-5.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-6.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-7.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-8.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-9.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-10.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-11.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-12.jpg" alt="Interior view" class="gallery__img">
</div>

这是Js：

const overlayString = () => `
<div class="overlay">
  <button class="overlay__close-icon" id="closeOverlay">&times;</button>
  <img src="img/prev.png" alt="Previous button" class="overlay__btn" id="overlayPrev">
  <img src="img/hg-1.jpg" alt="Interior view" class="overlay__img">
  <img src="img/next.png" alt="Next button" class="overlay__btn" id="overlayNext">
</div>`;

// Inject template to html structure
document.querySelector('#main').insertAdjacentHTML('beforeend', overlayString());

// Replace overlay img
const overlay = img => document.querySelector('.overlay__img').src = img.src;

// Show elements based on section
let query = document.querySelector('.gallery');
let images = 'gallery__img';
if (!query) {
  query = document.querySelector('.section-gallery');
  images = 'section-' + images;
}

// Nodelist elements
const imageElems = document.querySelectorAll("." + images);
let currentOverlay;

// Open overlay
query.addEventListener('click', () => {
  document.querySelector('.overlay').classList.add('showOverlay');
  document.querySelector('body').style.overflow = 'hidden';

// Change overlay img based on the element that was clicked.
    const target = event.target;
    const index =  Array.prototype.indexOf.call(query.children, target);
    overlay(imageElems[index]);
});

// Overlay prev and next button
document.querySelector('#overlayPrev').addEventListener('click', () => {
  currentOverlay > 0 ? --currentOverlay : currentOverlay = imageElems.length - 1;
  overlay(imageElems[currentOverlay])
});

我知道，当我单击prev按钮时，我的代码未注册所单击元素的索引，这可能就是为什么该元素无法按我希望的那样工作的原因，但是我被困在这里，任何帮助都将不胜感激。

请不要使用jQuery，我正在尝试仅使用纯JS来实现。

Answer 1

您可以使用querySelector获取所有图像，并使用forEach遍历其元素，并附加一个事件侦听器，该事件侦听器将在nodeList或Array.prototype.indexOf.call中输出图像的索引到获取节点列表中图像的索引。如果要使元素的索引从1开始，只需在事件侦听器的索引中添加1。

<div class="gallery">
  <img src="img/hg-1.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-2.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-3.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-4.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-5.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-6.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-7.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-8.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-9.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-10.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-11.jpg" alt="Interior view" class="gallery__img">
  <img src="img/hg-12.jpg" alt="Interior view" class="gallery__img">
</div>
<script>
var galleryImages = document.querySelectorAll("div.gallery > .gallery__img");
galleryImages.forEach((img, index)=>{
	img.addEventListener("click", function(e){
   console.log("Index of image: "+index);
   //console.log(Array.prototype.indexOf.call(galleryImages, e.target));
  });
});
</script>

获取上一个/下一个按钮的元素索引

1 个答案: