如何向滑块添加自动播放？

Question

大家好，我在 w3schools.com and I already implement it; You can see it here 中发现了一个滑块。 w3schools 教程有添加自动播放的脚本，但在这种情况下，是一个或另一个脚本。 ¿有没有办法将它与箭头一起使用并自动播放？

这是唯一的箭头脚本：

<script>
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

</script>

谢谢

Answer 1

您可以使用以下代码执行此操作。我添加了一个停止按钮，这样您也可以看到如何停止自动播放。

N.B. 我已将 id 添加到您的下一个按钮，这样就不会混淆单击哪个元素。如果您可能想在其他地方使用 .next，则不建议使用 class 名称。

代码已完整注释。

如果您还需要什么，请告诉我。

// Start autoplaying automatically
var autoplayInterval = setInterval(function() {

    // Get element via id and click next
    document.getElementById("next").click();
    
   
  }, 1000); // Do this every 1 second, increase this!

// Stop function added to button
function stopAutoplay() {

  // Stop the autoplay
  clearInterval(autoplayInterval);

}

var slideIndex = 1;
showSlides(slideIndex);

// Start autoplaying automatically
var autoplayInterval = setInterval(function() {

    // Get element via id and click next
    document.getElementById("next").click();
    
   
  }, 1000); // Do this every 1 second, increase this!

// Stop function added to button
function stopAutoplay() {

  // Stop the autoplay
  clearInterval(autoplayInterval);

}



// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">

  <!-- Slideshow container -->
  <div class="slideshow-container">

    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade" style="display: block;">
      <div class="numbertext">1 / 3</div>
      <a href="https://www.google.com/" target="_lank"><img src="https://acrip.co/wp-content/uploads/2021/01/banner-panel-enero-19.jpg" style="width:100%"></a>
      <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade" style="display: none;">
      <div class="numbertext">2 / 3</div>
      <a href="https://espanol.yahoo.com/" target="_blank"><img src="https://acrip.co/wp-content/uploads/2021/01/banner-webinar-soluciones-20-3.jpg" style="width:100%"></a>
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade" style="display: none;">
      <div class="numbertext">3 / 3</div>
      <a href="https://www.usatoday.com/" target="_blank"><img src="https://acrip.co/wp-content/uploads/2020/12/slider_3-kactus.jpg" style="width:100%"></a>
      <div class="text">Caption Three</div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a id="next" class="next" onclick="plusSlides(1)">❯</a>
  </div>
  <br>

  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot active" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
  <br>


  <button id="stopAutoplayButton" onclick="stopAutoplay();">Stop</button>


</body>

如何向滑块添加自动播放？

How do i add an autoplay to slider?

javascript

css

jquery

slider

autoplay