各W3.CSSピクチャスライドショーのタイムアウトを設定するにはどうすればよいですか？

-1

"setTimeout（function、time）"を使用しようとしましたが、動作しません。各W3.CSSピクチャスライドショーのタイムアウトを設定するにはどうすればよいですか？

私はw3schools.comのコードの一部をコピーしてください。（https://www.w3schools.com/w3css/w3css_slideshow.asp）

これはW3.CSSのスライドショーのコードです。

<div class="w3-content w3-display-container" style="max-width:800px;"> 
    <img class="mySlides" src="img/food/pad.jpg" 
    style="width:100%;cursor:pointer;" onclick="plusDivs(1)"> 

    <img class="mySlides" src="img/food/green_curry.jpeg" 
    style="width:100%;cursor: pointer;" onclick="plusDivs(1)"> 

    <img class="mySlides" src="img/food/kai.jpg" 
    style="width:100%;cursor:pointer;" onclick="plusDivs(1)"> 

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

これは、JavaScriptコードです。ここ

<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"; 
    }

出典

2017-05-01 PaoPaoMC

正常に動作しています私の解決策があなたの問題を解決したかどうかを知る。ありがとう！ – ad08

ありがとう！それは私の問題を解決する。 – PaoPaoMC

あなたの問題のための作業コードである -

ここ

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
    .mySlides { 
 
    display: none 
 
    } 
 
</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" style="max-width:800px"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%"> 
 
    </div> 
 

 
    <div class="w3-center"> 
 
    <div class="w3-section"> 
 
     <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button> 
 
     <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button> 
 
    </div> 
 
    <button class="w3-button demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-button demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-button demo" onclick="currentDiv(3)">3</button> 
 
    </div> 
 

 

 
    <script> 
 
    var slideIndex = 0; 
 
    carousel(); 
 

 
    function carousel() { 
 
     var i; 
 
     var x = document.getElementsByClassName("mySlides"); 
 
     for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
     } 
 
     slideIndex++; 
 
     if (slideIndex > x.length) { 
 
     slideIndex = 1 
 
     } 
 
     x[slideIndex - 1].style.display = "block"; 
 
     setTimeout(carousel, 5000); // Change image every 5 seconds 
 
    } 
 
    </script> 
 
    <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-red", ""); 
 
     } 
 
     x[slideIndex - 1].style.display = "block"; 
 
     dots[slideIndex - 1].className += " w3-red"; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

、setTimeoutメソッド（関数、時間が）私を聞かせてください

出典

2017-05-01 10:48:51 ad08

各W3.CSSピクチャスライドショーのタイムアウトを設定するにはどうすればよいですか？

答えて

関連する問題