自动JS滑块？

Question

我正在制作一个js滑块，它既是自动化的，又有箭头控件，我有箭头控件，但我无法使它自动化。

这是代码;

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0} 
 
</style> 
 

 

 
<div class="w3-content w3-display-container" style="max-width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%"> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
</div> 
 

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

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-white"; 
 
} 
 
</script>

可能有人请得到它自动运行照亮一盏灯？

Answer 1

您可以通过调用setInterval函数使其自动运行。

setInterval（）方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。

setInterval（）方法将继续调用该函数，直到调用clearInterval（），或者窗口关闭。

我在这里创建了一个函数，所以你可以创建一个想法如何使它。 您可以阅读更多here为setInterval()

我没有运行此代码，所以让我知道它是否有任何错误。

function makeInfinite(time){ 
    setInterval(function(){ 
     plusDivs(1); 
    },time*1000); 
} 

makeInfinite(3); 

Answer 2

setInterval（）是你在找什么。您可能还想尝试添加一种方式来延迟间隔，只要有人点击不同的幻灯片，因为单击“幻灯片3”仅仅让它在半秒后离开会是一种不好的用户体验，因为自动化。

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
.mySlides {display:none} 
 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
 
.w3-badge {height:13px;width:13px;padding:0} 
 
</style> 
 

 

 
<div class="w3-content w3-display-container" style="max-width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/Free_Printing_Lions_Front.jpg" style="width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/All_Blacks_Training.jpg" style="width:100%"> 
 
    <img class="mySlides" src="http://www.rugby-heaven.co.uk/media/wysiwyg/TourJersey_1.jpg" style="width:100%"> 
 
    <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
</div> 
 

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

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-white"; 
 
} 
 

 
setInterval(function(){showDivs(++slideIndex);},3000); 
 
</script>