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

Question

我找到了模态库示例并尝试对其进行调整以适应我的需求，但现在我的上一个 - 下一个按钮有问题...您有什么建议吗？ (javascript newbee)

CODEPEN

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 我尝试按照您的建议进行操作，示例如下：

CODEPEN

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

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>