JavaScript：如何使用相同的脚本在一个页面上添加多个图像滑块？

Question

我正在努力解决一页上有多个滑块的问题。我已经修复了一些随机问题，例如在 stackoverflow 上搜索时图像未显示或消失，但对于这个问题，我一直在寻找类似问题的答案，但我不太明白他们是如何修复它的，因为只发布了固定代码。

然而，据我了解，每个滑块 div 应该有不同的 scripID，但我无法解决它。

这是我的代码：

HTML：

<div class="card" class="col-md-3">

 <!-- Slideshow container -->

    <div class="slideshow-container">

     <!-- Full-width images with number and caption text -->

         <div class="mySlides fade">

             <img src="/images/1.jpg" style="width:100%">

         </div>

         <div class="mySlides fade">

             <img src="/images/2.jpg" style="width:100%">

         </div>

         <div class="mySlides fade">

            <img src="/images/3.jpg" style="width:100%">

         </div>

     <!-- Next and previous buttons -->

     <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

      <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>

    <br>

    <!-- The dots/circles -->

    <div style="text-align:center">

      <span class="dot" onclick="currentSlide(1)"></span>

      <span class="dot" onclick="currentSlide(2)"></span>

      <span class="dot" onclick="currentSlide(3)"></span>

    </div>

 <h2>Header </h2>

 <hr>

 <p class="hinfo">headerinfo</p>

 <p>Text info on the card</p>

 <p>Grey & Walnut colors<br>W:120 • D:120 • H:77</p>

</div>

脚本：

var slideIndex = 1;

showSlides(slideIndex);

// Next/previous controls

function plusSlides(n) {

  showSlides(slideIndex += n);

}

// Thumbnail image controls

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

}

</script>

Answer 1

首先，您需要将 id 添加到您的容器中，并向您的函数添加其他参数，以便它们可以知道哪些滑块需要更改：<div class="slideshow-container" id="first">&nbsp;<!-- Full-width images with number and caption text -->&nbsp; &nbsp; &nbsp;<div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="/images/1.jpg" style="width:100%">&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img src="/images/2.jpg" style="width:100%">&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="mySlides fade">&nbsp; &nbsp; &nbsp; &nbsp; <img src="/images/3.jpg">&nbsp; &nbsp; &nbsp;</div>&nbsp;<!-- Next and previous buttons -->&nbsp;<a class="prev" onclick="plusSlides(-1, 'first', 'firstSliderIndex')">&#10094;</a>&nbsp; <a class="next" onclick="plusSlides(1, 'first', 'firstSliderIndex')">&#10095;</a>&nbsp; <br />&nbsp; <!-- The dots/circles --><div style="text-align:center">&nbsp; <span class="dot" onclick="currentSlide(1, 'first', 'firstSliderIndex')"></span>&nbsp; <span class="dot" onclick="currentSlide(2, 'first', 'firstSliderIndex')"></span>&nbsp; <span class="dot" onclick="currentSlide(3, 'first', 'firstSliderIndex')"></span></div></div>你的脚本：<script>&nbsp; &nbsp; var indexes = {&nbsp; &nbsp; &nbsp; &nbsp; firstSliderIndex: 1,&nbsp; &nbsp; &nbsp; &nbsp; secondSliderIndex: 2,&nbsp; &nbsp; };&nbsp; &nbsp; showSlides(indexes.firstSliderIndex, 'first', 'firstSliderIndex');&nbsp; &nbsp; // Next/previous controls&nbsp; &nbsp; function plusSlides(n, id, index) { // n - number of slide, id - container id, index - current slide number in slider&nbsp; &nbsp; &nbsp; &nbsp; showSlides(indexes[index] += n, id, index);&nbsp; &nbsp; }&nbsp; &nbsp; // Thumbnail image controls&nbsp; &nbsp; function currentSlide(n, id, index) {&nbsp; &nbsp; &nbsp; &nbsp; showSlides(indexes[index] = n, id, index);&nbsp; &nbsp; }&nbsp; &nbsp; function showSlides(n, id, index) {&nbsp; &nbsp; &nbsp; &nbsp; var i;&nbsp; &nbsp; &nbsp; &nbsp; var slides = document.querySelectorAll(`#${id} .mySlides`);&nbsp; &nbsp; &nbsp; &nbsp; var dots = document.querySelectorAll(`#${id} .dot`);&nbsp; &nbsp; &nbsp; &nbsp; if (n > slides.length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; indexes[index] = 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (n < 1) {indexes[index] = slides.length}&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < slides.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slides[i].style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < dots.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dots[i].className = dots[i].className.replace(" active", "");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; slides[indexes[index]-1].style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; dots[indexes[index]-1].className += " active";&nbsp; &nbsp; }</script>当然，这段代码可以重构或修改，但这是最简单的方法