0

滑块按我想要的方式工作，没有使其自动运行的部分：

  1. 我想要单击时的图像以前进到下一张幻灯片，该幻灯片与下面的代码一起使用。
  2. 我希望按钮在单击时显示该按钮的滑块，该滑块与下面的代码一起使用。
  3. 我想自动运行滑块以无限期地遍历每张幻灯片。此代码有效（底部的注释掉的位），但是当我应用/取消注释时，上面的第 1 和第 2 点会中断。

我怎样才能使上述所有三个要求一起工作？

<div class="container">
  <div id="slider" class="slider">
    <div class="slider-item active">
      <span class="title">Title One</span>
      <img src="images/mozambique-home-1.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Two</span>
      <img src="images/mozambique-home-2.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Three</span>
      <img src="images/mozambique-home-3.jpg" alt="" class="img-fluid" />
    </div>
    <div class="slider-item">
      <span class="title">Title Four</span>
      <img src="images/mozambique-home-4.jpg" alt="" class="img-fluid" />
    </div>
    <ul id="dots" class="list-inline dots"></ul>
  </div>
</div>

JS

<script>
      var slider = document.getElementById("slider");
      var sliderItem = slider.getElementsByTagName("div");
      var dots = document.getElementById("dots");
      var dotsChild = document
        .getElementById("dots")
        .getElementsByTagName("li");
      for (i = 0; i < sliderItem.length; i++) {
        // console.log("sliderItem: ", i);
        dots.appendChild(document.createElement("li"));
        dotsChild[i].classList.add("list-inline-item");
        dotsChild[i].setAttribute("id", i);
        dotsChild[i].innerHTML = i;
        dotsChild[0].classList.add("active");
        dotsChild[i].addEventListener("click", runSlider);
      }
      function runSlider() {
        var dnum = this.getAttribute("id");
        for (i = 0; i < sliderItem.length; i++) {
          sliderItem[i].classList.remove("active");
          sliderItem[dnum].classList.add("active");
          dotsChild[i].classList.remove("active");
          dotsChild[dnum].classList.add("active");
        }
      }
      const imageDiv = document.querySelectorAll(".slider-item");
      imageDiv.forEach((el, idx) => {
        el.id = idx;
        el.addEventListener("click", handleClick, true);
      });

      function handleClick(e) {
        let maxImgArray = sliderItem.length;
        let nextImage;
        let id = e.path[1].id;
        id = Number(id);
        nextImage = Number(id + 1);
        if (nextImage > maxImgArray - 1) {
          nextImage = 0;
        }
        // console.log("image ID: ", nextImage);
        const slide = document.getElementById(nextImage);
        slide.classList.add("active");
        const prevSlide = document.getElementById(id);
        prevSlide.classList.remove("active");
        dotsChild[id].classList.remove("active");
        dotsChild[nextImage].classList.add("active");
      }

      //   var slideIndex = 0;
      //   showSlides();
      //   function showSlides() {
      //     var i;
      //     var slides = document.querySelectorAll(".slider-item");
      //     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, 6000); // Change image every 2 seconds
      //   }
    </script>
4

0 回答 0