Question

我要制作一个自动播放的响应式滑块。我最初的代码是这样的。它工作正常。

不过，我要把代码分开，因为它不会自动播放。我尝试通过 setInterval(slider,3000) 自动播放幻灯片，但无法正常工作。

意识到是'功能滑块'中的所有内容导致的问题，我将按钮与按下分开，创建了两个功能，但没有奏效。我不知道该怎么办...

function slider() {
        let slides = document.querySelectorAll(".slide"),
            slider = document.querySelector(".slider"),
            last = slider.lastElementChild,
            first = slider.firstElementChild,
            btn = document.querySelectorAll(".btn");

        slider.insertBefore(last, first);

        btn.forEach(btn => {
            btn.addEventListener("click", movement);
        });

        function movement(e) {
            slider = document.querySelector(".slider");
            last = slider.lastElementChild;
            first = slider.firstElementChild;

            const activeSlide = document.querySelector(".active");

            if (e.target.id === "next") {
                slider.insertBefore(first, last.nextSibling);

                activeSlide.classList.remove("active");
                activeSlide.nextElementSibling.classList.add("active");
            } else {
                slider.insertBefore(last, first);
                activeSlide.classList.remove("active");
                activeSlide.previousElementSibling.classList.add("active");
            }
        }
    }

    slider();

* {
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 300px;
  margin: auto;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 300px;
  position: absolute;
  text-align: center;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}

.slide.active {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.slide.active ~ .slide {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  text-align: center;
}

.slide {
  background:#222;
  color: white;
  padding: 30px;
}

button {
  margin-top: 20px;
  border: none;
  border-radius: 0;
  background: aliceblue;
  color: #333;
  padding: 10px;
  cursor: pointer;
}

<div class="slider__wrapper">
        <div class="slider">
            <div class="slide active">
                <h3>Slide One</h3>
                <p>test</p>
            </div>
            <div class="slide">
                <h3>Slide Two</h3>
                <p>test</p>
            </div>
            <div class="slide">
                <h3>Slide Three</h3>
                <p>1234</p>
            </div>
        </div>

        <button id="prev" class="btn">Prev</button>
        <button id="next" class="btn">Next</button>

    </div>

Answer 1

因为您在 event 函数中使用 movement() 来查看哪个按钮被按下，所以您可以提供一个带有方向的“虚拟”对象：

function slider() {
  let slides = document.querySelectorAll(".slide"),
    slider = document.querySelector(".slider"),
    last = slider.lastElementChild,
    first = slider.firstElementChild,
    btn = document.querySelectorAll(".btn");

  slider.insertBefore(last, first);

  btn.forEach(btn => {
    btn.addEventListener("click", movement);
  });
  setInterval(function()
  {
      movement({target:{id:"next"}});
  }, 3000);
  function movement(e) {
    slider = document.querySelector(".slider");
    last = slider.lastElementChild;
    first = slider.firstElementChild;

    const activeSlide = document.querySelector(".active");

    if (e.target.id === "next") {
      slider.insertBefore(first, last.nextSibling);

      activeSlide.classList.remove("active");
      activeSlide.nextElementSibling.classList.add("active");
    } else {
      slider.insertBefore(last, first);
      activeSlide.classList.remove("active");
      activeSlide.previousElementSibling.classList.add("active");
    }
  }
}
slider();

* {
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 300px;
  margin: auto;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 300px;
  position: absolute;
  text-align: center;
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.slide.active {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slide.active~.slide {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  text-align: center;
}

.slide {
  background: #222;
  color: white;
  padding: 30px;
}

button {
  margin-top: 20px;
  border: none;
  border-radius: 0;
  background: aliceblue;
  color: #333;
  padding: 10px;
  cursor: pointer;
}

<div class="slider__wrapper">
  <div class="slider">
    <div class="slide active">
      <h3>Slide One</h3>
      <p>test</p>
    </div>
    <div class="slide">
      <h3>Slide Two</h3>
      <p>test</p>
    </div>
    <div class="slide">
      <h3>Slide Three</h3>
      <p>1234</p>
    </div>
  </div>

  <button id="prev" class="btn">Prev</button>
  <button id="next" class="btn">Next</button>

</div>

Vanilla JS - 无限自动播放滑块

1 个答案: