Question

我正在一个投资组合网站上，在这里我可以在灯箱内以幻灯片形式显示图像。当我单击图像时，将打开一个灯箱，并显示包含该项目更多图像的幻灯片。我想在同一页面中创建多个幻灯片，而无需为每个幻灯片重新编写javascript孔，这可能吗？我使它工作了一个，但是我不知道如何在其余的幻灯片中复制它而不再次复制所有代码。有人可以帮助我吗？谢谢

一个图像链接和灯箱的HTML：

 <!-- Portfolio item 01-->

 <div class="projects" id="portfolio-01">
   <a href="#" id="btnOpen"><img id="img-project" src="img/Arba_img_02.jpg"></a>
  </div>


<!-- Portfolio Lightboxes-->

 <!-- Lightbox 01-->
    <div class="container" id="portfolio-item-01">
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_01.jpg">
     </div>
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_02.jpg">
     </div>
     <div class="slide">
         <img class="portfolio-img" src="img/Arba_img_03.jpg">
     </div>

   <!-- Next and previous buttons -->
     <a class="prev" id="">Prev</a>
     <a class="next" id="">Next</a>

   <!-- Close -->
    <a href="#portfolio" class="close">Back ↗</a>

   </div>

JavaScript：

<script>

    let sliderImages = document.querySelectorAll('.slide'),
    arrowLeft = document.querySelector('.prev'),
    arrowRight = document.querySelector('.next'),
    current = 0,
    openSlide = document.getElementById('btnOpen'),
    container = document.querySelector('.container');


openSlide.addEventListener("click", function(){


  container.style.display = 'flex';

  // Clear all images
  function reset() {
    for (let i = 0; i < sliderImages.length; i++) {
      sliderImages[i].style.display = "none";
    }
  }

  // Init slider
  function startSlide() {
    reset();
    sliderImages[0].style.display = "flex";
  }

  // Show prev
  function slideLeft() {
    reset();
    sliderImages[current - 1].style.display = "flex";
    current--;
  }

  // Show next
  function slideRight() {
    reset();
    sliderImages[current + 1].style.display = "flex";
    current++;
  }

  // Left arrow click
  arrowLeft.addEventListener("click", function(){
    if (current === 0) {
      current = sliderImages.length;
    }
    slideLeft();
  });

  // Right arrow click
  arrowRight.addEventListener("click", function() {
    if (current === sliderImages.length - 1) {
      current = -1;
    }
    slideRight();
  });

  startSlide();

})

</script>

使用JavaScript创建多个幻灯片

0 个答案: