我正在尝试建立一个画廊模式滑块。到目前为止,我可以通过使用目标src打开显示正确图像的模式。如何使用相同src属性在单击或下一个btn或上一个btn上更改模态图像?
html:
<div class="galleryModal">
<div class="galleryModal__imgContainer">
<span id="closeModal" class="closeBtn">×</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';
})
发布于 2018-06-03 02:02:39
我所理解的是,你有一个图像网格点击图像,你需要在弹出窗口中显示该图像,然后单击下一步/上一步按钮显示其他图像显示。
检查此工作代码段here。尝试使用这些示例代码片段更改您的代码。你会很容易实现的。
希望这能有所帮助。
https://stackoverflow.com/questions/50659438
复制相似问题