javascript - 模态库中的上一个和下一个按钮不起作用

Question

我找到了模态库示例并尝试使其适应我的需求，但现在我的上一个 - 下一个按钮有问题......你有什么建议吗？（javascript新蜜蜂）

编解码器

HTML

<div class="row">
 <div class="col">
  <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox(this);toSlide(1)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox(this);toSlide(2)" class="hover-shadow preview">
 </div>
 <div class="col">
  <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox(this);toSlide(3)" class="hover-shadow preview">
 </div>
</div>

<div id="Lightbox" class="modal">
 <span class="close pointer" onclick="closeLightbox()">&times;</span>
    
 <div class="modal-content">
  <div class="slide">
   <img id="modal-slides" class="image-slide" alt="END OF SLIDESHOW GROUP" />
  </div>

  <a class="previous" onclick="changeSlide(-1)">&#10094;</a>
  <a class="next" onclick="changeSlide(1)">&#10095;</a>
   </div>
  </div>
 </div>
</div>

JS

var slideIndex = 1;
showSlide(slideIndex);

function openLightbox(element) {
  document.getElementById('Lightbox').style.display = 'block';
  document.getElementById("modal-slides").src = element.src; 
}
function closeLightbox() {
  document.getElementById('Lightbox').style.display = 'none';
}
function changeSlide(n) {
    showSlide(slideIndex += n);
}
function toSlide(n) {
    showSlide(slideIndex = n);
}
function showSlide(n) {
  const slides = document.getElementsByClassName('slide');
  if (n > slides.length) {
    slideIndex = 1; 
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = 'block';
}

我尝试了各种选择，但我的 javascript 知识很差。我很感激任何帮助。

编辑

prettyInPink 我试着按照你的建议做，这里是例子：

编解码器

当我通过单击最后一张图片（第 8 号）打开模式时，一切正常，但是当使用任何其他图片打开模式时，PREV - NEXT 无法正常工作......显示的图像在某种程度上是随机的......任何建议？

标签： javascriptcssmodal-dialoggallery

Answer 1

您可以使用为图像设置的数据属性并将其作为data-image目标。

    let _body = document.querySelector('body'),
        galleryImg = document.querySelectorAll('.gallery img'),
        modalWindow = document.getElementById('modal-gall'),
        modalImg = document.getElementById('modal-slides'),
        closeModal = document.getElementById('closem'),
        nextBtn = document.getElementById('nextm'),
        prevBtn = document.getElementById('prevm'),
        curSlide;
    
    galleryImg.forEach((img) => {
      img.addEventListener('click', function() {
        curSlide = Number(this.dataset.image);
        modalImg.src = this.src;
        _body.classList.add('modal-open');
      });
    });

    nextBtn.addEventListener('click', function() {
      curSlide === galleryImg.length ? curSlide = 1 : curSlide += 1
      modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
    });

    prevBtn.addEventListener('click', function() {
      curSlide === 1 ? curSlide = galleryImg.length : curSlide -= 1
      modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
    });

    closeModal.addEventListener('click', function(e) {
      e.preventDefault();
      _body.classList.remove('modal-open');
    });

      body {
        font-family: Tahoma, sans-serif;
        margin: 0;
        background-color: #514c5c;
        color: white;
      }
      .gall-container {
          text-align: left;
          padding: 0 2% 0 2%; 
          width: auto;
      }
      .gall-text {
          text-align: left;
          font-size: 16px;
          padding: 50px 5px 2px 5px; 
          width: 100%;
      }
      .gallery {
          display: flex; 
          height: auto; 
          flex-wrap: wrap; 
          justify-content: left; 
          align-content: flex-start; 
          padding: 5px 0 5px 0; 
      }
      .gallery > img {
          max-width: 90vw;
          max-height: 200px;
          cursor: zoom-in;
          display: block;
          padding: 6px; 
      }
      #modal-gall {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 8px;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.97);
        align-items: center;
        justify-content: center;
      }

      .modal-open #modal-gall {
        display: block;
      }

      .modal-content {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
      }
      #modal-slides {
          display: block;
          max-width:100%; 
          max-height: calc(100vh - 16px);
          margin: auto;
      }
      #closem {
        cursor: pointer;
        color: #9e97b1;
        position: absolute;
        top: 26px;
        right: 0px;
        font-size: 40px;
        font-weight: bold;
        border-radius: 5px 0 0 5px;
        padding: 2px 16px 8px 16px;
        z-index: 2;
        background-color: #29272e;
        text-decoration: none;
      }
      #closem:hover,
      #closem:focus {
        color: red;
        cursor: pointer;
      }
      #prevm,
      #nextm {
        cursor: pointer;
        position: absolute;
        top: 46%;
        width: auto;
        padding: 10px 22px;
        margin-top: -10px;
        color: #9e97b1;
        font-weight: bold;
        font-size: 30px;
        user-select: none;
        -webkit-user-select: none;
        background-color: #29272e;
        text-decoration: none;
      }
      #prevm {
        left: 0;
        border-radius: 0 5px 5px 0;
      }
      #nextm {
        right: 0;
        border-radius: 5px 0 0 5px;
      }
      #prevm:hover,
      #nextm:hover {
        background-color: #322c42;
      }

  <div class="gall-container">
      <div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 02</b>
          <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla. 
          <br><span style="color: #b1afaf; font-size: 80%;">>>  Cras non commodo massa.</span><br>
      </div>
      <div class="gallery">
          <img src="https://i.postimg.cc/sxLJ4WgV/08.jpg" alt="08 Image description" data-image="8">
          <img src="https://i.postimg.cc/vm73wD3z/07.jpg" alt="07 Image description" data-image="7">
          <img src="https://i.postimg.cc/qvyG2zVT/06.jpg" alt="06 Image description" data-image="6">
          <img src="https://i.postimg.cc/MTWt6xL8/05.jpg" alt="05 Image description" data-image="5">
          <div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 01</b> 
              <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla. 
              <br> <span style="color: #b1afaf; font-size: 80%;">>>  Cras non commodo massa.</span><br>
          </div>
          <img src="https://i.postimg.cc/HsJzs66j/04.jpg" alt="04 Image description" data-image="4">
          <img src="https://i.postimg.cc/jq3vbpQG/03.jpg" alt="03 Image description" data-image="3">
          <img src="https://i.postimg.cc/Xqq85L3H/02.jpg" alt="02 Image description" data-image="2">
          <img src="https://i.postimg.cc/C1m7dXyn/01.jpg" alt="01 Image description" data-image="1">
      </div>
      <div id="modal-gall">
          <a href="#close" id="closem">&times;</a>
          <div class="modal-content">
              <img id="modal-slides" alt="">
          </div>
          <a id="prevm">&#10094;</a>
          <a id="nextm">&#10095;</a>
      </div>
  </div>