javascript - 在 slider 中使用 img src 原型(prototype)来更改 slider 图像

Question

我正在尝试构建画廊模态 slider 。到目前为止，我可以使用目标 src 打开显示正确图像的模态。如何使用相同的 src 属性在单击或下一个或上一个 btn 时更改模态图像？

html:

<div class="galleryModal">

            <div class="galleryModal__imgContainer">
                <span id="closeModal" class="closeBtn">&times</span>

                <img src="/dist/images/gal1.jpg" alt="modal main image" class="galleryModal__img current">

                <div class="galleryModal__controls">
                    <svg class="prevBtn modalBtn">
                        <use xlink:href="/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                    <svg class="nextBtn modalBtn">
                        <use xlink:href="/dist/images/sprite.svg#icon-play3"></use>
                    </svg>
                </div>
            </div>

        </div>

JS:

let myImages = document.querySelectorAll('.gallery__img');
let modal = document.querySelector('.galleryModal');
let closeBtn = document.querySelector('.closeBtn');
let current = document.querySelector('.current');
let next = document.querySelector('.nextBtn');
let prev = document.querySelector('.prevBtn');

console.log(myImages);


//OPEN MODAL ON IMAGE CLICK
myImages.forEach(img => {
    img.addEventListener('click', (e) => {
        modal.style.display = 'block';
        current.src = e.target.src;
    })
})

//CLOSE MODAL
closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
})

Answer 1

我的理解是，您需要在单击图像时显示图像网格，您需要在弹出窗口中显示该图像，然后在单击下一个/上一个按钮时显示其他图像。

检查此工作片段 here .尝试使用这些示例片段更改您的代码。您将轻松实现。

希望这可能有所帮助。