如何使用 ev.target.nextElementSibling ev.targetprevElementSibling 转到下一个/上一个图像灯箱？

Question

我是 Web 开发的初学者

我的灯箱有问题，我需要使用 ev.target.nextElementSibling 和 ev.target.prevElementSibling 通过单击下一个 arrow.png (img)/ prev arrow.png(img) 转到下一个/上一个图像，我已经尝试了一切，但我不知道如何。 当我单击图像时，它会放大（没关系）但是当我单击箭头时，图像正在隐藏，但我想转到下一张/上一张图像。

 const imgs = document.querySelectorAll('.gallery img'); const lightbox = document.querySelector('.lightbox'); const arrowNext = document.querySelector('.arrowNext'); for (let index = 0; index < imgs.length; index++) { const img = imgs[index]; img.addEventListener('click', showLightbox); } function showLightbox(ev) { const prevEl = ev.target.prevElementSibling; const nextEl = ev.target.nextElementSibling; console.log(ev) const lightbox = document.querySelector('.lightbox'); const img = document.querySelector('.lightbox img'); const imgUrl = ev.target.src; img.src = imgUrl; lightbox.classList.add('visible'); } lightbox.addEventListener('click', hideLightbox); function hideLightbox() { lightbox.classList.remove('visible'); } arrowNext.addEventListener('click', nextPhoto); function nextPhoto(ev) { const arrowNext = document.querySelector('.arrowNext'); const img = document.querySelector('.arrowNext img'); const imgUrl = ev.target.src; img.src = imgUrl; const next = ev.target.nextElementSibling; }

 body { background: #eee; } .lightbox { position: absolute; z-index: 100; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; justify-content: center; align-items: center; display: flex; transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); transform: scale(0); } .visible { transform: scale(1); } .lightbox img { max-width: 80%; max-height: 80%; } .arrowNext { cursor: pointer; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lightbox</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="gallery"> <img src="/img/img1.jpg" alt="photo1"> <img src="/img/img2.jpg" alt="photo2"> <img src="/img/img3.jpg" alt="photo3"> <img src="/img/img4.jpg" alt="photo4"> </section> <div class="lightbox"> <div class="arrowPrev"> <img src="/img/prev arrow.png" alt=""> </div> <img src="/img/img5.jp" alt=""> <div class="arrowNext"> <img src="/img/next arrow.png" alt=""> </div> </div> <script src="main.js" type="text/javascript"></script> </body> </html>

Answer 1

请注意， ev.target是鼠标单击的元素，在您的情况下是箭头。 您正在寻找下一个图像，而不是下一个箭头。

我建议使用索引变量来获取显示哪个图像，然后执行document.querySelectorAll('img')[index+1]来获取下一个图像。

用您的代码可以提供的内容：

（请注意，需要ev.stopPropagation()来防止在单击箭头时关闭灯箱。）

 const imgs = document.querySelectorAll('.gallery img'); const lightbox = document.querySelector('.lightbox'); const arrowNext = document.querySelector('.arrowNext'); var index = 0; for (let index = 0; index < imgs.length; index++) { const img = imgs[index]; img.addEventListener('click', (e) => {showLightbox(e, index)}); } function showLightbox(ev, i) { const prevEl = ev.target.prevElementSibling; const nextEl = ev.target.nextElementSibling; const lightbox = document.querySelector('.lightbox'); const img = document.querySelector('.lightbox img'); const imgUrl = ev.target.src; img.src = imgUrl; index = i; lightbox.classList.add('visible'); } lightbox.addEventListener('click', hideLightbox); function hideLightbox() { lightbox.classList.remove('visible'); } arrowNext.addEventListener('click', nextPhoto); function nextPhoto(ev) { ev.stopPropagation(); index++; const arrowNext = document.querySelector('.arrowNext'); const img = document.querySelector('.arrowNext img'); const imgUrl = imgs[index].src; img.src = imgUrl; }

 body { background: #eee; } .lightbox { position: absolute; z-index: 100; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); top: 0; left: 0; justify-content: center; align-items: center; display: flex; transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); transform: scale(0); } .visible { transform: scale(1); } .lightbox img { max-width: 80%; max-height: 80%; } .arrowNext { cursor: pointer; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lightbox</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="gallery"> <img src="/img/img1.jpg" alt="photo1"> <img src="/img/img2.jpg" alt="photo2"> <img src="/img/img3.jpg" alt="photo3"> <img src="/img/img4.jpg" alt="photo4"> </section> <div class="lightbox"> <div class="arrowPrev"> <img src="/img/prev arrow.png" alt=""> </div> <img src="/img/img5.jp" alt=""> <div class="arrowNext"> <img src="/img/next arrow.png" alt="" style="background:red;padding:20px"> </div> </div> <script src="main.js" type="text/javascript"></script> </body> </html>

如何使用 ev.target.nextElementSibling ev.targetprevElementSibling 转到下一个/上一个图像灯箱？

问题描述

1 个解决方案

解决方案1
0 2020-10-10 10:16:49

如何使用 ev.target.nextElementSibling ev.targetprevElementSibling 转到下一个/上一个图像灯箱？

问题描述

1 个解决方案

解决方案1 0 2020-10-10 10:16:49

解决方案1
0 2020-10-10 10:16:49