Wie stelle ich die Zeit für jede W3.CSS-Bild-Diashow ein?

-1

Ich versuche "setTimeout (Funktion, Zeit)" zu verwenden, aber es funktioniert nicht.Wie stelle ich die Zeit für jede W3.CSS-Bild-Diashow ein?

kopiere ich einige Code in w3schools.com. (https://www.w3schools.com/w3css/w3css_slideshow.asp)

Diese Codes von W3.CSS Diashow ist.

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

Dies ist JavaScript-Code.

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

Quelle

2017-05-01 PaoPaoMC

Do mich zu lassen wissen, ob meine Lösung Ihr Problem gelöst hat. Vielen Dank! – ad08

Danke! Es löst mein Problem. – PaoPaoMC

hier ist der Arbeitscode für Ihr Problem -

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

Hier setTimeout (Funktion, Zeit) funktioniert gut

Quelle

2017-05-01 10:48:51 ad08

Wie stelle ich die Zeit für jede W3.CSS-Bild-Diashow ein?

Antwort

Verwandte Themen