[英]Next/prev button for modal with Javascript
我一直在嘗試為我正在構建的自定義網站制作模式。 go 似乎一切都很好。 它顯示了我單擊的任何圖片,並且“上一個”按鈕按預期工作。 但是,“下一步”按鈕似乎存在問題,因為它的行為取決於我當前在哪張圖片上。 有時它會向前甚至向后跳躍幾個索引。 一些見解將不勝感激。 提前致謝。 這是代碼 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"><</span>
</div>
<div class="next">
<span id="next">></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);
});
我設置了一些對象以使其運行,並且您的上一個/下一個按鈕代碼似乎可以工作。 是否還有其他可能涉及的代碼? 修改 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.