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

我正在尝试完成一个图像库的滑块，我所缺少的只是prev/next按钮功能。现在prev按钮正在工作，但有一个问题。问题是，我有一个图像库，当我点击它们时，一个弹出窗口会显示被点击的图像。但是，如果我单击不是数组第一个图像的任何图像并单击prev按钮，它将带我返回到数组的最后一个图像，而prev按钮将带我返回到单击的图像之前的图像

因此，如果我有10个图像，我在数组中单击索引为3的图像，然后单击“上一步”按钮，弹出窗口将显示索引为2的图像。让我向你展示我迄今为止所取得的成果：

<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])
});

const overlystring=（）=>`
&时代；
`;
//将模板注入html结构
document.querySelector（'#main'）.insertAdjacentHTML（'beforeend'，overlystring（））；
//更换叠加img
const overlay=img=>document.querySelector（'.overlay\uu img'）.src=img.src；
//基于节显示元素
让query=document.querySelector（'.gallery'）；
let images='gallery___img'；
如果（！查询）{
query=document.querySelector（“.section gallery”）；
图像='部分-'+图像；
}
//节点列表元素
常量imageElems=document.querySelectorAll（“.”+图像）；
让我们一起来吧；
//开放覆盖
query.addEventListener（'click'，（）=>{
document.querySelector（'.overlay'）.classList.add（'showOverlay'）；
document.querySelector（'body'）.style.overflow='hidden'；
//根据单击的元素更改覆盖img。
const target=event.target；
const index=Array.prototype.indexOf.call（query.children，target）；
覆盖（imageElems[索引]）；
});
//覆盖上一页和下一页按钮
document.querySelector（“#overlayPrev”）.addEventListener（'click'，（）=>{
currentOverlay>0？--currentOverlay:currentOverlay=imageElems.length-1；
覆盖（imageElems[currentOverlay]）
});

我知道，当我点击prev按钮时，我的代码没有注册被点击元素的索引，这可能就是为什么它不能按我想要的方式工作的原因，但是我被困在这里，非常感谢您的帮助

---

请不要用jQuery，我只尝试使用纯JS来实现这一点。

您可以使用querySelector获取所有图像，并使用

forEach

迭代其元素，并附加一个事件侦听器，该事件侦听器将输出节点列表或

数组中图像的索引。prototype.indexOf.call

获取节点列表中图像的索引。如果要从一开始获取元素的索引，只需将一个添加到事件侦听器的索引中即可

var gallerymages=document.querySelectorAll（“div.gallery>.gallery\uu img”）；
galleryImages.forEach（（img，索引）=>{
img.addEventListener（“单击”，函数（e）{
console.log（“图像索引：+索引”）；
//log（Array.prototype.indexOf.call（galleryimage，e.target））；
});
});

没有id为

“main”

的元素。标记正在包装除页眉和页脚之外的html结构的所有内容。我的答案是您想要的吗？