使用滑块中的img src原型更改滑块图像
使用滑块中的img src原型更改滑块图像
提问于 2018-06-03 01:26:50
我正在尝试建立一个画廊模式滑块。到目前为止，我可以通过使用目标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';
})回答 1
Stack Overflow用户
发布于 2018-06-03 02:02:39
我所理解的是，你有一个图像网格点击图像，你需要在弹出窗口中显示该图像，然后单击下一步/上一步按钮显示其他图像显示。
检查此工作代码段here。尝试使用这些示例代码片段更改您的代码。你会很容易实现的。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659438
复制相关文章
相似问题