如何将自动播放添加到滑块？
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 ... 问候以上是关于如何将自动播放添加到滑块？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 mouseenter 自动播放 Owl carousel 2 滑块？