1 页上的 2 个轮播滑块不工作答案

【问题标题】：2 Carousel Sliders on 1 Page Not Working1 页上的 2 个轮播滑块不工作
【发布时间】：2018-08-17 09:49:41
【问题描述】：

仍然是 JS 的新手，遇到了一个小滑块问题。我在一页上有 2 个简单的轮播滑块，但只有一个有效。如果我禁用第二个，第一个可以正常工作，但不能同时工作。

我怀疑这与我的 Javascript 代码有关，但不知道要更改什么：

JS（上）和 HTLM（下）：

// - - - - - BANNER SLIDER

<script>
  var slideIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("bg-image-slide");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
  }
</script>



// - - - - - TESTIMONIAL SLIDER

<script>

  var slideIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("testimonial");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 6500);
  }

</script>

<!-- BANNER SLIDER  -->
<div class="banner-slider">
<div class="bg-image-slide bg-slide-1"></div>
<div class="bg-image-slide bg-slide-2"></div>
<div class="bg-image-slide bg-slide-3"></div>
</div>


<!-- TESTIMONIAL SLIDER  -->

  <div id="testimonial-slider">
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-1-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-1-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-1-en}}</h5>
    </div>
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-2-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-2-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-2-en}}</h5>

    </div>
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-3-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-3-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-3-en}}</h5>
    </div>
  </div>

【问题讨论】：

能否提供问题的jsfiddle链接？
这是你的意思吗？ jsfiddle.net/bjxdhp0c/#&togetherjs=qqpensfrn0 抱歉，这很新，不确定我是否做得正确。我复制并粘贴了我的 HTML 和 JS 代码。
没关系，我已经发布了答案，试着了解你哪里出错了。 :)

标签： javascript html slider carousel

【解决方案1】：

对于第二个轮播，你必须制作不同的函数，以及不同的 slideIndex 变量。

对于第一个轮播，我使用了carousel function 和slideIndex。

对于第二个轮播，我使用了carousel1 function 和slideIndex1。

.display-container{
margin:20px;
border: 1px solid;
}

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="display-container">
  <div class="mySlides1" style="width:100%">Slide 1 </div>
  <div class="mySlides1" style="width:100%">Slide 2</div>
</div>
<br><br>
<div class="display-container">
  <div class="mySlides2" style="width:100%">Slide 3 </div>
  <div class="mySlides2" style="width:100%">Slide 4</div>
</div>
<script>
var slideIndex = 1;
var slideIndex1 = 1;

carousel();
carousel1();

function carousel() {
  var i;
    var x = document.getElementsByClassName("mySlides1");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
  }
  
  function carousel1() {
  var i;
    var x = document.getElementsByClassName("mySlides2");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex1++;
    if (slideIndex1 > x.length) {
      slideIndex1 = 1
    }
    x[slideIndex1 - 1].style.display = "block";
    setTimeout(carousel1, 2000); // Change image every 2 seconds
  }

</script>

</body>
</html>

【讨论】：

耶！！我做到了，它奏效了——最重要的是，我现在明白了！非常感谢您抽出宝贵时间提供帮助:)