Zur Navigation

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]

15.04.2018 14:13 | geändert von Jörg: 16.04.2018 10:44

2 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 :)

16.04.2018 11:03

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/

16.04.2018 13:50

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

16.04.2018 14:49 | geändert: 16.04.2018 14:50

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]

16.04.2018 16:52 | geändert von Jörg: 16.04.2018 18:14

6 Jörg

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

16.04.2018 18:24 | geändert: 16.04.2018 18:24

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)





[BBCode-Hilfe]