在HTML中使用多个幻灯片时，JavaScript滑块错误

Question

我在HTML网站上有一个JavaScript滑块，代码如下：

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000);
}

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg">
  </div>
</div>

这很好，现在我在同一页面中添加了另一个滑块：

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="auto1.jpg" alt="Image">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="auto2.jpg">
  </div>

</div>

现在，问题是碰撞的，我认为，由于两者都有相同的JavaScript代码，所以两个幻灯片都在计算幻灯片和空白图像中的总图像，任何人都可以告诉我如何解决此问题，谢谢

Answer 1

首先：您调用函数showlides（）带有param（slideIndex），因为该函数使用函数使用全局声明的var 。

---

我建议，添加或删除类（例如.Active），而不是使用JS进行样式。优势是，您可以通过该类获取函数中的索引，而不是使用全局var：

const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

使用该类别，您可以在slideshow-container中循环而不会遇到麻烦SlideIndex。

工作示例：

（我删除了功能plusslides（） and currentslide（），因为它们在该示例中没有使用，至少<代码> plusslides（）需要另一个功能，而不是showslides（））

showSlides();

function showSlides() {
  const containers = document.querySelectorAll('.slideshow-container');
  
  for (let i = 0; i < containers.length; i++) {
    const slides = containers[i].getElementsByClassName("mySlides");
    const active_slide = containers[i].querySelector('.active');
    let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

    active_slide.classList.remove('active');
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1
    }
    slides[slideIndex - 1].classList.add('active');
  }
  setTimeout(showSlides, 2000);
}

.mySlides {
  display: none;
}

.mySlides.active {
  display: block;
}

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 2</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div class="mySlides fades active">
    <div class="numbertext">2 / 2</div>
    <img src="auto2.jpg" alt="Image 4">
  </div>
</div>

---

带有更多滑块和幻灯片的示例：

showSlides();

function showSlides() {
  const containers = document.querySelectorAll('.slideshow-container');
  
  for (let i = 0; i < containers.length; i++) {
    const slides = containers[i].getElementsByClassName("mySlides");
    const active_slide = containers[i].querySelector('.active');
    let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;

    active_slide.classList.remove('active');
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1
    }
    slides[slideIndex - 1].classList.add('active');
  }
  setTimeout(showSlides, 2000);
}

.mySlides {
  display: none;
}

.mySlides.active {
  display: block;
}

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 1</div>
    <img src="test1.jpg" alt="Image 0">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades active">
    <div class="numbertext">1 / 2</div>
    <img src="fb1.jpg" alt="Image 1">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 2</div>
    <img src="fb2.jpg" alt="Image 2">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 3</div>
    <img src="auto1.jpg" alt="Image 3">
  </div>

  <div class="mySlides fades active">
    <div class="numbertext">2 / 3</div>
    <img src="auto2.jpg" alt="Image 4">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">3 / 3</div>
    <img src="auto3.jpg" alt="Image 5">
  </div>
</div>

<div class="col-lg-6 col-md-10 slideshow-container">
  <div class="mySlides fades">
    <div class="numbertext">1 / 4</div>
    <img src="house1.jpg" alt="Image 6">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">2 / 4</div>
    <img src="house2.jpg" alt="Image 7">
  </div>

  <div class="mySlides fades active">
    <div class="numbertext">3 / 4</div>
    <img src="house3.jpg" alt="Image 8">
  </div>

  <div class="mySlides fades">
    <div class="numbertext">4 / 4</div>
    <img src="house4.jpg" alt="Image 9">
  </div>
</div>