我正在为一位朋友建立一个展示画作的作品集网站。所有绘画都显示在索引页面上，我创建了一个 for 循环，以便单击每幅画打开显示该画的模式：
// create references to the modal...
const modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
const images = document.getElementsByClassname('myImages');
// the image in the modal
const modalImg = document.getElementById("img01");
// and the caption in the modal
const captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (let i = 0; i < images.length; i++) {
let img = images[i];
// and attach our click listener for this image.
img.addEventListener("click",openmodal)
}
// Function to open modal
function openmodal() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
我已将上一个和下一个按钮附加到模态，并且一旦模态打开，我希望能够在绘画之间来回切换：
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×
</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
我正在尝试将事件侦听器添加到上一个/下一个按钮，但是遇到了问题 - 我不知道如何从模态访问所选图像，因此它知道在上一个/下一个按钮时打开上一个/下一个/单击下一步按钮。
// selecting the prev and next buttons
const prev = document.querySelector(".prev")
const next = document.querySelector(".next")
prev.addEventListener("click",previousSlide);
function previousSlide() {
// Not sure what to put here...
}
任何人都可以帮助我或至少指出我正确的方向吗？谢谢