Banner endlos abspielen

1 krieger98

Was muss in dem JavaScript noch eingefügt werden damit die Bilder endlos dargestellt werden:

<script>
var numChanges = 0;
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    numChanges++;
    if (numChanges < 8) {
        setTimeout(showSlides, 6000); // Change image every 5 seconds
    }
}
</script>

https://www.fahrrad-workshop-sprockhoevel.de/index.htm

[Edit Jörg: Code-Block eingefügt]

2 Jörg Kruse

    numChanges++;
    if (numChanges < 8) {
        setTimeout(showSlides, 6000); // Change image every 5 seconds
    }

Bei jedem Aufruf der Funktion showSlides() wird numChanges um einen Zähler erhöht. Die Funktion showSlides() wird nur solange neu aufgerufen, wie numchanges kleiner als 8 ist. Für eine Endlosschleife musst du die Bedingung einfach weglassen:

setTimeout(showSlides, 6000); // Change image every 6 seconds

Der Kommentar passt übrigens nicht ganz, 6000 Millisekunden entsprechen 6 Sekunden :)

3 krieger98

Zitat von Jörg
    numChanges++;
    if (numChanges < 8) {
        setTimeout(showSlides, 6000); // Change image every 5 seconds
    }
Bei jedem Aufruf der Funktion showSlides() wird numChanges um einen Zähler erhöht. Die Funktion showSlides() wird nur solange neu aufgerufen, wie numchanges kleiner als 8 ist. Für eine Endlosschleife musst du die Bedingung einfach weglassen:
setTimeout(showSlides, 6000); // Change image every 6 seconds
Der Kommentar passt übrigens nicht ganz, 6000 Millisekunden entsprechen 6 Sekunden :)

Danke
Wenn ich " setTimeout(showSlides, 6000); // Change image every 6 seconds" entferne wird nur noch ein Bild angezeigt.

https://www.fahrrad-workshop-sprockhoevel.de/

4 Jörg Kruse

Ja, das ist der Teil, der stehen bleiben sollte :) Über setTimeout() wird die Funktion showSlides() rekursiv aufgerufen und wenn die Zeile entfernt wird, wird die Funktion nur einmal ausgeführt. Ich hatte aber ja auch geschrieben, dass die Bedingung entfernt werden soll - also das "if (numChanges < 8) {" "}" drum rum.

5 krieger98

Zitat von Jörg

Ja, das ist der Teil, der stehen bleiben sollte :) Über setTimeout() wird die Funktion showSlides() rekursiv aufgerufen und wenn die Zeile entfernt wird, wird die Funktion nur einmal ausgeführt. Ich hatte aber ja auch geschrieben, dass die Bedingung entfernt werden soll - also das "if (numChanges < 8) {" "}" drum rum.

Was heißt drum rum?
Sollte das so aussehen:

<script>
var numChanges = 0;
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    }
</script>

[Edit Jörg: Code-Block eingefügt]

6 Jörg Kruse

Das setTimeout(showSlides, 6000) muss da auch noch mit rein, sonst wird showSlides nur einmal ausgeführt:

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 6000);
}

"Drum rum" heißt, dass ein if Block mit einer Bedingung so um einen Befehl herum aufgebaut ist:

if (Bedingung) {
    Befehl;
}

Wenn der Befehl ohne Bedingung ausgeführt werden soll, führt man ihn einfach ohne diesen Block "drum rum" aus:

Befehl;

Zum Aufbau von if Blöcken in JavaScript siehe auch diese Erläuterungen auf SELFHTML:

https://wiki.selfhtml.org/wiki/JavaScript/Verzweigung

nach oben

Banner endlos abspielen

Beitrag schreiben (als Gast)