• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vollbild Slideshow

himix

Neues Mitglied
Hallo Leute,

bin gerade am Website basteln und hätte gerne eine Fullscreen Slideshow eingebaut.
Nun soll diese Slideshow alle 5 Sekunden das Bild ändern, und dabei am unteren Ende der Website anzeigen welches Bild gerade gewählt ist. Bisher habe ich einfach mittels onclick und Button eine Funktion aufgerufen und deren Funktion den "Index" des Bildes übergeben, das Funktioniert auch nur eben das mit den 5 Sekunden nicht.
Weiters sollte beim Wechsel des Bildes eine Animation durchgeführt werden.
Hier mal die Funktion:

HTML:
function change_element(index) {
            var body = document.getElementsByClassName('background')[0];
            if(index == 1) {
                body.style.backgroundImage ='url(images/intro_backgroundimages/bg1.jpg)';
            }else if(index == 2) {
                body.style.backgroundImage ='url(images/intro_backgroundimages/bg2.jpg)';
            }else if(index == 3) {
                body.style.backgroundImage ='url(images/intro_backgroundimages/bg3.jpg)';
            }else if(index == 4) {
                body.style.backgroundImage ='url(images/intro_backgroundimages/bg4.jpg)';
            }else if(index == 5) {
                body.style.backgroundImage ='url(images/intro_backgroundimages/bg3.jpg)';
            }
        }

Vielen Dank schon mal im Voraus
 
Zuletzt bearbeitet:
Werbung:
Was meinst Du denn mit "Fullscreen"? Soll nur das ganze Browserfenster ausgefüllt werden oder der ganze Monitor?. Bei deinem Beispiel wird das ganze Browserfenster ausgefüllt. Ist das für dich ausreichend? Wenn ja, dann gibt es für dich etwas sehr schönes, vorgefertigtes:
http://vegas.jaysalvat.com/
 
Werbung:
Dann sieh dir mal meinen Link an. Perfekt geeignet für dein Vorhaben.
 
Zuletzt bearbeitet von einem Moderator:
Das wird nicht funktionieren, weil die Funktion change_element() einen Eingangsparameter braucht.
 
Werbung:
Ich denke in dem Fall, würde ich des wie folgt gestalten.
var id= 1;
setInterval(change_element(id), 5000);

Und dann in der Funktion am Ende:
if(id < 5){
id = id +1;
} else {
id = 1;
}

Theoretisch sollte des doch so funktionieren...
Die Variable wird außerhalb der Funktion initialisiert und dann einfach mit jedem Aufruf hochgerechnet.
Und dann wieder für den nächsten Aufruf mit dem neuen Wert verwendet.
Sobald sie den Wert 5 hat, wird sie wieder auf 1 gesetzt :)
 
naja... wenn er es gerne selber machen möchte ;)
Hat einen gewissen Lerneffekt ^^

Allerdings stimme ich dir definitiv zu :D
Es gibt so geile Slider for free!!
 
Werbung:
Zurück
Oben