下一步/上一步按钮，用于Javascript模式

我一直在努力使一个自定义网站，我正在建设模式。一切似乎都很顺利。它显示了我点击的任何一张图片，“上一张”按钮按预期工作。然而，“下一步”按钮似乎有问题，因为它的行为不同于我当前所在的图片。有时，它会向前或向后跳跃几个索引。如能提供一些见解，将不胜感激。提前谢谢。下面是一个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>

X

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

const modalContainer=document.getElementById（“modalContainer”）；
const prevButton=document.getElementById（“prev”）；
const nextButton=document.getElementById（“下一步”）；
const closeModal=document.getElementById（“close”）；
const modalContent=document.getElementById（“modalContent”）；
常量imgContainer=document.getElementById（“imgContainer”）；
让ContainerImage=imgContainer.querySelectorAll（“img”）；
设imgIndex=0；
containerImage.forEach（函数（img）{
setAttribute（“数据索引”，imgIndex++）；
img.addEventListener（“单击”，（）=>{
if（modalContainer.classList.contains（“displaynone”））{
modalContainer.classList.remove（“displaynone”）；
modalContainer.classList.add（“displaymodel”）；
modalContent.src=img.src；
};
imgIndex=img.dataset.index；
控制台日志（imgIndex）；
});
});
closeModal.addEventListener（“单击”，（）=>{
if（modalContainer.classList.contains（“displaymodel”））{
modalContainer.classList.remove（“displaymodel”）；
modalContainer.classList.add（“displaynone”）；
}
imgIndex=0；
});
addEventListener（“单击”，（）=>{
imgIndex=（imgIndex+=1）%ContainerImage.length；
modalContent.src=集装箱图像[imgIndex].src；
控制台日志（imgIndex）；
});
prevButton.addEventListener（“单击”，（）=>{
imgIndex=（imgIndex-=1）；
if（imgIndex<0）{
imgIndex=集装箱图像长度-1；
控制台日志（imgIndex）；
};
modalContent.src=集装箱图像[imgIndex].src；
控制台日志（imgIndex）；
});

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

const prevButton=document.querySelector（“prev”）；
const nextButton=document.querySelector（“下一步”）；
让images=document.queryselectoral（“img”）；
设imgIndex=0；
images.forEach（（img）=>
img.addEventListener（“单击”，（）=>{
imgIndex=parseInt（img.dataset.index）；
设置已选（）；
})
);
设置已选（）；
prevButton.addEventListener（“单击”，（）=>{
imgIndex=imgIndex-=1；
如果（imgIndex<0）imgIndex=images.length-1；
设置已选（）；
});
addEventListener（“单击”，（）=>{
imgIndex=（imgIndex+=1）%images.length；
设置已选（）；
});
函数setSelected（）{
images.forEach（（img）=>img.classList.remove（“selected”）；
图像[imgIndex].classList.add（“选定”）；
}

img{
显示：内联块；
边框：2倍实心透明；
}
.选定{
边框：2倍纯红；
}

上
下一个

谢谢您的回答。不，没有别的了。我只是硬编码到图像的路径。顺便说一句，我没有提到，只有当我点击第一张图片时，“下一步”按钮才能正常工作。例如，如果我点击第三个，然后点击下一个，一切都会一团糟。我仍然很困惑。我想了一会儿，也许你需要解析数据索引，但这似乎没有必要。这很有趣，因为在你回答之前，我发现出于某种原因，imgIndex变量将数据索引存储为字符串，所以每当我单击时，它都会返回1，11，111。。。你明白了。然后我像你说的那样使用了parseInt（）函数，它开始按预期工作。奇怪的是，为什么在编程了“下一步”按钮行为的函数中，imgIndex作为字符串返回，即使在foreach循环中我可以增加它也没有问题。啊……是的，我想就是这样。我刚开始在周围放一个边框，我看到它坏了。

parseInt

似乎可以解决它。