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 controlsfunction plusSlides(n) {  showSlides(slideIndex += n);}// Thumbnail image controlsfunction 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">

 <!-- 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">

     </div>

 <!-- Next and previous buttons -->

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

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

  <br />

  <!-- The dots/circles -->

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

  <span class="dot" onclick="currentSlide(1, 'first', 'firstSliderIndex')"></span>

  <span class="dot" onclick="currentSlide(2, 'first', 'firstSliderIndex')"></span>

  <span class="dot" onclick="currentSlide(3, 'first', 'firstSliderIndex')"></span>

</div>

</div>

你的脚本：

<script>

    var indexes = {

        firstSliderIndex: 1,

        secondSliderIndex: 2,

    };

    showSlides(indexes.firstSliderIndex, 'first', 'firstSliderIndex');

    // Next/previous controls

    function plusSlides(n, id, index) { // n - number of slide, id - container id, index - current slide number in slider

        showSlides(indexes[index] += n, id, index);

    }

    // Thumbnail image controls

    function currentSlide(n, id, index) {

        showSlides(indexes[index] = n, id, index);

    }

    function showSlides(n, id, index) {

        var i;

        var slides = document.querySelectorAll(`#${id} .mySlides`);

        var dots = document.querySelectorAll(`#${id} .dot`);

        if (n > slides.length) {

            indexes[index] = 1;

        }

        if (n < 1) {indexes[index] = 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[indexes[index]-1].style.display = "block";

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

    }

</script>

当然，这段代码可以重构或修改，但这是最简单的方法