如何将自动播放添加到滑块?

Posted

技术标签:

【中文标题】如何将自动播放添加到滑块?【英文标题】:How do i add an autoplay to slider? 【发布时间】:2021-04-18 15:56:22 【问题描述】:

大家好,我在w3schools.com 中找到了一个滑块,并且我已经实现了它;你可以看到它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>

谢谢

【问题讨论】:

【参考方案1】:

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

注意我已在您的下一个按钮中添加了id,因此您不会混淆要单击的元素。如果您想在其他地方使用 .next,则不建议使用类名。

代码已完全注释。

如果你还想要什么,请告诉我。

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

【讨论】:

Oliver,感谢您的帮助,它非常有用,您可以在此处查看:elgatodiego.com/pruebas/slider-test_2.html ... 问候

以上是关于如何将自动播放添加到滑块?的主要内容,如果未能解决你的问题,请参考以下文章

将自动播放添加到基本的 jquery 滑块

自动将垂直导航附加到滑块脊椎

如何使用 mouseenter 自动播放 Owl carousel 2 滑块?

如何将另一个图像添加到滑块的拇指或如何添加两个拇指图像?

jQuery nivo 滑块 - 自动播放不起作用(手动高级)

将提示文本动态添加到滑块