带有 Javascript 的模态的下一个/上一个按钮

Question

我一直在尝试为我正在构建的自定义网站制作模式。一切似乎都很顺利。它显示了我单击的任何图片，并且“上一个”按钮按预期工作。但是，“下一步”按钮似乎存在问题，因为它的行为取决于我当前在哪张图片上。有时它会向前甚至向后跳跃几个索引。一些见解将不胜感激。提前致谢。这是一个代码HTML：

<div id="modalcontainer" class="displaynone">
    <h4>
        <span id="close">X</span>
    </h4>
    <img src="" alt="" id="modalcontent">
    <div class="buttoncontainer">
        <div class="previous">
            <span id="prev">&lt;</span>
        </div>
        <div class="next">
            <span id="next">&gt;</span>
        </div>
    </div>
</div>
<div id="imgcontainer">
    <img src="images/1.JPG" alt="">
    <img src="images/2.JPG" alt="">
    <img src="images/3.JPG" alt="">
    <img src="images/4.JPG" alt="">
    <img src="images/8.png" alt="">
    <img src="images/9.jpg" alt="">
    <img src="images/10.jpg" alt="">
</div>

还有 JS：

const modalContainer = document.getElementById("modalcontainer");
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const closeModal = document.getElementById("close");
const modalContent = document.getElementById("modalcontent");
const imgContainer = document.getElementById("imgcontainer");
let containerImages = imgContainer.querySelectorAll("img");
let imgIndex = 0;



containerImages.forEach(function(img){
    img.setAttribute("data-index", imgIndex++);
    img.addEventListener("click", () => {
        if(modalContainer.classList.contains("displaynone")){
            modalContainer.classList.remove("displaynone");
            modalContainer.classList.add("displaymodal");
            modalContent.src = img.src;
           
        };
            imgIndex = img.dataset.index;
            console.log(imgIndex);
    });
});

closeModal.addEventListener("click", () => {
    if(modalContainer.classList.contains("displaymodal")){
        modalContainer.classList.remove("displaymodal");
        modalContainer.classList.add("displaynone");
    }
    imgIndex = 0;
});

nextButton.addEventListener("click", () => {
    imgIndex = (imgIndex += 1) % containerImages.length;
    modalContent.src = containerImages[imgIndex].src;
    console.log(imgIndex);
});

prevButton.addEventListener("click", () => {
    imgIndex = (imgIndex -= 1);
    if (imgIndex < 0) {
    imgIndex = containerImages.length - 1;
    console.log(imgIndex);
    };
    modalContent.src = containerImages[imgIndex].src;
    console.log(imgIndex);
});

Answer 1

我设置了一些对象以使其运行，并且您的上一个/下一个按钮代码似乎可以正常工作。是否还有其他可能涉及的代码？修改 imageContainer 中的图像数量的东西？

const prevButton = document.querySelector("#prev");
const nextButton = document.querySelector("#next");
let images = document.querySelectorAll("img");
let imgIndex = 0;

images.forEach((img) =>
  img.addEventListener("click", () => {
    imgIndex = parseInt(img.dataset.index);
    setSelected();
  })
);

setSelected();

prevButton.addEventListener("click", () => {
  imgIndex = imgIndex -= 1;
  if (imgIndex < 0) imgIndex = images.length - 1;
  setSelected();
});

nextButton.addEventListener("click", () => {
  imgIndex = (imgIndex += 1) % images.length;
  setSelected();
});

function setSelected() {
  images.forEach((img) => img.classList.remove("selected"));
  images[imgIndex].classList.add("selected");
}

img {
  display: inline-block;
  border: 2px solid transparent;
}

.selected {
  border: 2px solid red;
}

<div id="imageContainer">
  <img src="https://picsum.photos/100?random=1" data-index="0">
  <img src="https://picsum.photos/100?random=2" data-index="1">
  <img src="https://picsum.photos/100?random=3" data-index="2">
  <img src="https://picsum.photos/100?random=4" data-index="3">
</div>
<div>
  <button id="prev">Prev</button>
  <button id="next">Next</button>
</div>