我正在尝试建立一个画廊模式滑块。到目前为止,我可以通过使用目标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';
})https://stackoverflow.com/questions/50659438
复制相似问题