如何製作幻燈片自動播放？

這張幻燈片需要點擊「下一步」按鈕才能播放。
基於這個功能，我能做些什麼來使幻燈片播放自動播放？
Here是我的來源。如何製作幻燈片自動播放？

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

來源

2016-12-20 NTN Imperial

你可以用setInterval函數來實現這一點。試試我的代碼

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<style> 
 
    .mySlides { 
 
     display: none 
 
    } 
 
    
 
    .w3-left, 
 
    .w3-right, 
 
    .w3-badge { 
 
     cursor: pointer 
 
    } 
 
    
 
    .w3-badge { 
 
     height: 13px; 
 
     width: 13px; 
 
     padding: 0 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <div class="w3-container"> 
 
     <h2>Slideshow Indicators</h2> 
 
     <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p> 
 
    </div> 
 

 
    <div class="w3-content w3-display-container" style="max-width:800px"> 
 
     <img class="mySlides" src="http://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
     <img class="mySlides" src="http://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
     <img class="mySlides" src="http://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%"> 
 
     <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> 
 
      <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
      <div class="w3-right w3-padding-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() { 
 
      plusDivs(1); 
 
     }, 1000); 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2016-12-20 04:58:42

謝謝你，它的工作原理。非常感謝您的回覆！ –

總是......快樂的編碼 –

如何製作幻燈片自動播放？

回答

相關問題