时间戳

首页 > 解决方案 > 我想创建一个带有工作下一个和上一个按钮的图像模式

javascript - 我想创建一个带有工作下一个和上一个按钮的图像模式

问题描述

您好我正在尝试创建一个带有图像标签的模式，该模式将显示页面上图像列表的相应图像 src 标签。我不确定如何获取所选图像的图像索引并增加和减少索引，它将 src 属性更改为相应的 src。我在下面链接了我的代码，但我不确定从那里做什么。有人可以帮我吗谢谢。

const galleryImages = document.querySelectorAll(".img-grid")
const modal = document.querySelector(".modal")
let newImg

for (i=0; i<galleryImages.length; i++) {
    galleryImages[i].addEventListener("click", (e) => {

        console.log(galleryImages[i])

        modal.classList.add("active")
        document.body.style.overflow = "hidden"

        var createImg = document.createElement("img")
        createImg.classList = "createdImg"

        newImg = modal.appendChild(createImg)

        newImg.src = e.target.src

        console.log(e.target.src)

        return newImg

    })
<div class="container">
            <div class="grid hookah">
                <div class="img-grid special">
                    <img src="./images/hookah-2.JPG" alt="hookah-2">
                </div>
                <div class="img-grid special">
                    <img src="./images/hookah-3.JPG" alt="hookah-3">
                </div>
                <div class="img-grid">
                    <img src="./images/hookah-1.jpg" alt="hookah-1">
                </div>
                <div class="img-grid">
                    <img src="./images/hookah-4.JPG" alt="hookah-4">
                </div>
                <div class="img-grid left">
                    <img src="./images/hookah-5.JPG" alt="hookah-5">
                </div>
                <div class="img-grid left">
                    <img src="./images/hookah-6.JPG" alt="hookah-6">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-1.JPG" alt="Shelf-1">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-2.JPG" alt="shelf-2">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-3.JPG" alt="shelf-3">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-4.JPG" alt="shelf-4">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-5.JPG" alt="shelf-5">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-6.JPG" alt="shelf-6">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-7.JPG" alt="shelf-7">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-8.JPG" alt="shelf-8">
                </div>
            </div>
            <div class="modal">
            </div>
        </div>

标签： javascripthtmlcss

解决方案

我首先提供一个演示，说明您遇到的问题。newImg您正在更改不是 img 元素的源属性。您想改为更改 src 属性createImg。

const galleryImages = document.querySelectorAll(".img-grid")
const modal = document.querySelector(".modal")
let newImg

for (i=0; i<galleryImages.length; i++) {
    galleryImages[i].addEventListener("click", (e) => {

        console.log(galleryImages[i])

        modal.classList.add("active")
        document.body.style.overflow = "hidden"

        var createImg = document.createElement("img")
        createImg.classList = "createdImg"

        newImg = modal.appendChild(createImg)

        //newImg.src = e.target.src
        createImg.src = e.target.src

        console.log(e.target.src)

        return newImg

    });
}
<div class="container">
            <div class="grid hookah">
                <div class="img-grid special">
                    <img src="./images/hookah-2.JPG" alt="hookah-2">
                </div>
                <div class="img-grid special">
                    <img src="./images/hookah-3.JPG" alt="hookah-3">
                </div>
                <div class="img-grid">
                    <img src="./images/hookah-1.jpg" alt="hookah-1">
                </div>
                <div class="img-grid">
                    <img src="./images/hookah-4.JPG" alt="hookah-4">
                </div>
                <div class="img-grid left">
                    <img src="./images/hookah-5.JPG" alt="hookah-5">
                </div>
                <div class="img-grid left">
                    <img src="./images/hookah-6.JPG" alt="hookah-6">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-1.JPG" alt="Shelf-1">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-2.JPG" alt="shelf-2">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-3.JPG" alt="shelf-3">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-4.JPG" alt="shelf-4">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-5.JPG" alt="shelf-5">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-6.JPG" alt="shelf-6">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-7.JPG" alt="shelf-7">
                </div>
                <div class="img-grid">
                    <img src="./images/shelf-8.JPG" alt="shelf-8">
                </div>
            </div>
            <div class="modal">
            </div>
        </div>

我将该演示作为您的答案的解决方案，以防您的项目的其他方面限制您的代码结构。我还提供了如何解决这个问题的演示。

const galleryImages = document.querySelectorAll(".img-grid img")
const modal = document.querySelector(".modal")

modal.addEventListener(
  "click",
  () => modal.classList.remove("active")
);

galleryImages.forEach(
  img => img.addEventListener("click", imgClicked)
);
function imgClicked(e) {
  const imgHtml = e.target.outerHTML;
  modal.innerHTML = imgHtml;
  modal.classList.add("active");
}
.modal {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0, 0.2);
  display: none;
}

.modal.active{
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container">
    <div class="grid hookah">
        <div class="img-grid special">
            <img src="./images/hookah-2.JPG" alt="hookah-2">
        </div>
        <div class="img-grid special">
            <img src="./images/hookah-3.JPG" alt="hookah-3">
        </div>
        <div class="img-grid">
            <img src="./images/hookah-1.jpg" alt="hookah-1">
        </div>
        <div class="img-grid">
            <img src="./images/hookah-4.JPG" alt="hookah-4">
        </div>
        <div class="img-grid left">
            <img src="./images/hookah-5.JPG" alt="hookah-5">
        </div>
        <div class="img-grid left">
            <img src="./images/hookah-6.JPG" alt="hookah-6">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-1.JPG" alt="Shelf-1">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-2.JPG" alt="shelf-2">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-3.JPG" alt="shelf-3">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-4.JPG" alt="shelf-4">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-5.JPG" alt="shelf-5">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-6.JPG" alt="shelf-6">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-7.JPG" alt="shelf-7">
        </div>
        <div class="img-grid">
            <img src="./images/shelf-8.JPG" alt="shelf-8">
        </div>
    </div>
    <div class="modal">
    </div>
</div>

在实际项目中，我可能会创建图像元素并在模式关闭时将其销毁。但是，对于一个快速的片段，我相信这清楚地表明了意图。希望这会有所帮助！

推荐阅读