Question

仍然是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>

Answer 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>

1页上的2个旋转木马滑块不起作用

1 个答案: