Diashow-Container für automatische Wiedergabe

Question

Ich habe eine neue Webseite mit einem Diashow-Container mit 6 Seiten erstellt. Jetzt kann ich manuell auf die nächste/vorherige Schaltfläche klicken und die nächsten/vorherigen Folien anzeigen, aber ich muss wissen, wie ich sie automatisch mit einer neuen Folie alle 3 Sekunden abspielen kann.

Hier ist mein Skript:

function plusSlides(n) 
 
\t { 
 
\t \t showSlides(slideIndex += n); 
 
\t } 
 

 
function currentSlide(n) 
 
\t { 
 
\t \t showSlides(slideIndex = n); 
 
\t } 
 

 
function showSlides(n) 
 
\t { 
 
\t \t var i; 
 
\t \t var slides = document.getElementsByClassName("mySlides"); 
 
\t \t var dots = document.getElementsByClassName("dot"); 
 
\t \t if (n > slides.length) {slideIndex = 1}  
 
\t \t if (n < 1) {slideIndex = slides.length} 
 
\t \t for (i = 0; i < slides.length; i++) { 
 
\t \t slides[i].style.display = "none"; 
 
\t } 
 

 
\t for (i = 0; i < dots.length; i++) 
 
\t \t { 
 
\t \t \t dots[i].className = dots[i].className.replace(" active", ""); 
 
\t \t } 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
} 
 
</script>

.slideshow-container { 
 
    position: relative; 
 
    max-width: 90%; 
 
    margin: auto; 
 
    animation: 30s slidy infinite; 
 
    
 
} 
 
/* Next & previous buttons */ 
 
.prev, .next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -22px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 
/* Position the "next button" to the right */ 
 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, .next:hover { 
 
    background-color: rgba(0,0,0,0.8); 
 
} 
 
/* Caption text */ 
 
.text { 
 
    color: white; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.textwbg { 
 
    color: Black; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
/* Number text (1/3 etc) */ 
 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 2; 
 
} 
 
/* The dots/bullets/indicators */ 
 
.dot { 
 
    cursor:pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #66b8ff; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 
.active, .dot:hover { 
 
    background-color: #555; 
 
} 
 
/* Fading animation */ 
 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 2s; 
 
    animation-name: fade; 
 
    animation-duration: 3s; 
 

 
} 
 
.nextbutton { 
 
\t position: relative; 
 
\t 
 
}

<div class="slideshow-container"> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">1/6</div> 
 
\t \t <img src="gal/a1.jpg" style="width:100%"> 
 
\t \t <div class="text">Our Mission</div> 
 
\t </div> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">2/6</div> 
 
\t \t <img src="gal/a2.jpg" style="width:100%"> 
 
\t \t <div class="textwbg">Our Doctor Pannel</div> 
 
\t </div> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">3/6</div> 
 
\t \t <img src="gal/a3.jpg" style="width:100%"> 
 
\t \t <div class="textwbg">Make an Appointment</div> 
 
\t </div> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">4/6</div> 
 
\t \t <img src="gal/a4.jpg" style="width:100%"> 
 
\t \t <div class="text">Friendly Environment</div> 
 
\t </div> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">5/6</div> 
 
\t \t <img src="gal/a5.jpg" style="width:100%"> 
 
\t \t <div class="textwbg">24/7</div> 
 
\t </div> 
 

 
\t <div class="mySlides fade"> 
 
\t \t <div class="numbertext">6/6</div> 
 
\t \t <img src="gal/a6.jpg" style="width:100%"> 
 
\t \t <div class="textwbg">Facilities</div> 
 
\t </div> 
 

 
\t <a class="prev" onclick="plusSlides(-1)">O</a> 
 
\t <a class="next" onclick="plusSlides(1)">O</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 

 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
    <span class="dot" onclick="currentSlide(4)"></span> 
 
    <span class="dot" onclick="currentSlide(5)"></span> 
 
    <span class="dot" onclick="currentSlide(6)"></span> 
 
    
 
</div> 
 

 
<script> 
 

 
var slideIndex = 1; 
 
showSlides(slideIndex);

Answer 1

Sie setInterval Funktion können diese

Answer 2

Der Code erreichen, die die automatische Ausführung tut setInterval ist. Wenn Sie den Unterschied zwischen setInterval und setTimeout Kontrolle dieser answer

var slideIndex = 0; 
 
showSlides(); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 

 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 

 
    slideIndex++; 
 

 
    if (slideIndex > slides.length) { 
 
    slideIndex = 1; 
 
    } 
 

 
    slides[slideIndex - 1].style.display = "block"; 
 

 
    setInterval(showSlides, 3000); // Here is the magic!, change the slide every 3 seconds 
 
}

.slideshow-container { 
 
    position: relative; 
 
    max-width: 90%; 
 
    margin: auto; 
 
    animation: 30s slidy infinite; 
 
} 
 
/* Next & previous buttons */ 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -22px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 
/* Position the "next button" to the right */ 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
/* Caption text */ 
 

 
.text { 
 
    color: white; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.textwbg { 
 
    color: Black; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
/* Number text (1/3 etc) */ 
 

 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 2; 
 
} 
 
/* The dots/bullets/indicators */ 
 

 
.dot { 
 
    cursor: pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #66b8ff; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 
.active, 
 
.dot:hover { 
 
    background-color: #555; 
 
} 
 
/* Fading animation */ 
 

 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 2s; 
 
    animation-name: fade; 
 
    animation-duration: 3s; 
 
} 
 
.nextbutton { 
 
    position: relative; 
 
}

<div class="slideshow-container"> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">1/6</div> 
 
    <img src="gal/a1.jpg" style="width:100%"> 
 
    <div class="text">Our Mission</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">2/6</div> 
 
    <img src="gal/a2.jpg" style="width:100%"> 
 
    <div class="textwbg">Our Doctor Pannel</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">3/6</div> 
 
    <img src="gal/a3.jpg" style="width:100%"> 
 
    <div class="textwbg">Make an Appointment</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">4/6</div> 
 
    <img src="gal/a4.jpg" style="width:100%"> 
 
    <div class="text">Friendly Environment</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">5/6</div> 
 
    <img src="gal/a5.jpg" style="width:100%"> 
 
    <div class="textwbg">24/7</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">6/6</div> 
 
    <img src="gal/a6.jpg" style="width:100%"> 
 
    <div class="textwbg">Facilities</div> 
 
    </div> 
 

 
    <a class="prev" onclick="plusSlides(-1)">O</a> 
 
    <a class="next" onclick="plusSlides(1)">O</a> 
 

 
</div> 
 
<br> 
 
<div style="text-align:center"> 
 

 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
    <span class="dot" onclick="currentSlide(4)"></span> 
 
    <span class="dot" onclick="currentSlide(5)"></span> 
 
    <span class="dot" onclick="currentSlide(6)"></span> 
 

 
</div>

Answer 3

Hier ist der aktualisierte Code zu klären, müssen die feinen funktioniert. Ich habe setInterval verwendet, damit es funktioniert und der slideIndex wird auf eins zurückgesetzt, sobald er das Ende erreicht hat.

var slideIndex = 1; 
 
window.onload = function() { 
 
    showSlides(slideIndex); 
 
    setInterval(function() { 
 
    showSlides(slideIndex); 
 
    slideIndex++; 
 
    }, 3000); 
 
} 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

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

.slideshow-container { 
 
    position: relative; 
 
    max-width: 90%; 
 
    margin: auto; 
 
    animation: 30s slidy infinite; 
 
} 
 
/* Next & previous buttons */ 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    margin-top: -22px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 
/* Position the "next button" to the right */ 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
/* Caption text */ 
 

 
.text { 
 
    color: white; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.textwbg { 
 
    color: Black; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
/* Number text (1/3 etc) */ 
 

 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 25px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 2; 
 
} 
 
/* The dots/bullets/indicators */ 
 

 
.dot { 
 
    cursor: pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #66b8ff; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 
.active, 
 
.dot:hover { 
 
    background-color: #555; 
 
} 
 
/* Fading animation */ 
 

 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 2s; 
 
    animation-name: fade; 
 
    animation-duration: 3s; 
 
} 
 
.nextbutton { 
 
    position: relative; 
 
}

<div class="slideshow-container"> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">1/6</div> 
 
    <img src="gal/a1.jpg" style="width:100%"> 
 
    <div class="text">Our Mission</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">2/6</div> 
 
    <img src="gal/a2.jpg" style="width:100%"> 
 
    <div class="textwbg">Our Doctor Pannel</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">3/6</div> 
 
    <img src="gal/a3.jpg" style="width:100%"> 
 
    <div class="textwbg">Make an Appointment</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">4/6</div> 
 
    <img src="gal/a4.jpg" style="width:100%"> 
 
    <div class="text">Friendly Environment</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">5/6</div> 
 
    <img src="gal/a5.jpg" style="width:100%"> 
 
    <div class="textwbg">24/7</div> 
 
    </div> 
 

 
    <div class="mySlides fade"> 
 
    <div class="numbertext">6/6</div> 
 
    <img src="gal/a6.jpg" style="width:100%"> 
 
    <div class="textwbg">Facilities</div> 
 
    </div> 
 

 
    <a class="prev" onclick="plusSlides(-1)">O</a> 
 
    <a class="next" onclick="plusSlides(1)">O</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 

 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
    <span class="dot" onclick="currentSlide(4)"></span> 
 
    <span class="dot" onclick="currentSlide(5)"></span> 
 
    <span class="dot" onclick="currentSlide(6)"></span> 
 

 
</div>