Wechselnde Bilder ohne reload

[aJunkie]

Hallo,

von JS habe ich wirklich gar keine Ahnung und hoffe, dass jemand so freundlich ist und mir bei dieser Sache hilft.

Ich hätte gerne im header wechselnde Bilder. Nehmen wir an: 3 Stück.
Ich habe ein Script gefunden und es versucht. Siehe Homepage in meiner Signatur.
Das Problem hier ist, dass der dann plötzlich anfängt zu blinken, etc.

Ich wollte, dass wenn das letzte Bild gezeigt wurde, soll es wieder von vorne anfangen.
Also eine Endlosschleife, sodass man kein "Hängen" sieht.
Und wenn JS deaktiviert ist, soll ein default Bild angezeigt werden.

Eigentlich will ich "Bild in Bild" haben. Das würde ich mit Rumfuchtelei ja in CSS hinkriegen.
Aber vielleicht muss man das hier berücksichtigen.
Das Defaultbild ist das, was übrig bleibt, wenn man sich
"HipHop, RnB, Rap, bla bla"
und
"Freedownloads, Songtexte, Videos"
wegdenkt.
An dieser Stelle wollte ich eben diese wechselnden Bilder in das Defaultbild integrieren.
Würde meines erachtens Bildgröße sparen.

Danke <3 ♥

 

[Gilles]

Du solltest zwingend JS für solche Sachen lernen ;) Es bewährt sich immer. Aber da ich mal heute nen guten tag hab hier das Script

window.onload = function() {
                changeBild(document.getElementById("meinBild"), 3000, ["bild2.jpg", "bild3.jpg"]);
                
                
            };
            
            
            function changeBild(element, zeit, bilderArray) {
                this.zaehler = 0;
                this.bilderArray = bilderArray;
                this.element = element;
                
                this.bilderArray.push(element.src);
                
                this.interval = window.setInterval(function() {                    
                    I.element.src = I.bilderArray[I.zaehler];
                    if(I.zaehler == (I.bilderArray.length -1)) {
                        I.zaehler = 0;
                    } else {
                     I.zaehler++;    
                    }
                    
                }, zeit);
                var I = this;
            }

Ein wenig musst du noch selbst machen. Eine Grafik erstellen ( <img>) mit einer id. In meinem Fall "meinBild". Und wenn kein javascript an ist, bleibt immer das erste Bild stehen. Ansonsten werden die anderen bilde rnoch hinzugeschaltet.

mit: changeBild(bildElement, zeitInMs, bilderSourceArray); rufst du das ganze auf. Ein Beispiel dafür habe ich dir ja gegeben.
Dann viel Spaß damit ;)

 

[struppi]

this wendest du hier aber falsch an. Wenn du wirklich ein Objekt benutzen willst, dann musst du die Funktion auch mit new aufrufen oder du machst die Variabeln lokal, was in der Version am sinnvollsten ist.

EDIT: schau dir mal an, was this ist

 

[crash]

new braucht man nicht zwangsläufig. this funktioniert auch bei funktionaler Programmierung. Er sollte sich lieber mal Closures angucken, denn die ganzen Variablen dort kann er einfach in der Lambda-Funktion benutzen.

 

[struppi]

new braucht man nicht zwangsläufig. this funktioniert auch bei funktionaler Programmierung.

Ich sage nicht das er es braucht. Nur ist in dem Fall this nichts weiter als das globale Objekt window. Funktioneren ist das eine, ob es Sinn macht das andere.

Ein closure verwendet er ja bereits und kann dort, genau wie ich es bereits sagte, die Variabeln nutzen, wenn sie lokale sind.

 

[crash]

Innerhalb von changeBild() ist this changeBild und innerhalb des Intervals ist es window. Wäre ein einfaches das zu ändern.

 

[Gilles]

Hab auch bemerkt dass this in dem Falle doof war. Hab nicht gewusst dass sich this dann auf window bezieht, wenn man kein neues Objekt erstellt. hier mal meine neue version:

            window.onload = function() {
              var bildchen =  new changeBild(document.getElementById("meinBild"), 3000, ["bild2.jpg", "bild3.jpg"]);                             
            };
            
            
            var changeBild = function(element, zeit, bilderArray) {
                
                this.zaehler = 0;
                this.bilderArray = bilderArray;
                this.element = element;
                
                this.bilderArray.push(element.src);
                
                this.interval = window.setInterval(function() {                    
                    I.element.src = I.bilderArray[I.zaehler];
                    if(I.zaehler == (I.bilderArray.length -1)) {
                        I.zaehler = 0;
                    } else {
                     I.zaehler++;    
                    }
                    
                }, zeit);
                var I = this;
            };

Wäre diese variante dann von der "Außenwelt" gekappt?
Da sich bei Funktionen, die von Events ausgelöst werden "this" auf das "Auslöser-Element" beziehen verwende ich den trick eine Variable mit this zu belegen. Mit this, setze ich die Attribute ja sozusagen public, dass sie auch von außen beschrieben werden können. Deswegen sind meine Variablen mit this.
Kann mir mal bitte jemanden den angesprochenen Satz mit der Lambda-Funktion erklären? Sagt mir nämlich garnichts. :) Danke

 

[_Thor_]

Ich hab da vor einiger Zeit mal was gebastelt Fortlaufendes wechseln eines Bildes per JavaScript

 

[crash]

window.onload = function() {
              var bildchen =  changeBild(document.getElementById("meinBild"), 3000, ["bild2.jpg", "bild3.jpg"]);                             
            };
            
            
            var changeBild = function(element, zeit, bilderArray) {
                
                var zaehler = 0;
                bilderArray.push(element.src);
                
                this.interval = window.setInterval(function() {                    
                    element.src = bilderArray[zaehler];
                    if(zaehler == (bilderArray.length -1)) {
                        zaehler = 0;
                    } else {
                        zaehler++;    
                    }
                    
                }, zeit);
            };

ge'closured

 

[struppi]

Innerhalb von changeBild() ist this changeBild und innerhalb des Intervals ist es window. Wäre ein einfaches das zu ändern.

innerhalb von changeBild war this gleich window, da es kein Objekt changeBild gibt, solange kein new aufgerufen wird, das ist genau das was ich eingang sagte. und ansonsten verwendete er kein anderes this.

 

[struppi]

Edit: - (war falsch ich hab new changeBild nicht gesehen)

Konstruktoren werden üblicherweise, per Konvention mit Großbuchstaben geschrieben.

 

[aJunkie]

Danke, wirklich vielen Dank an alle Beteiligten, besonders an alle, die Codes gepostet haben.

Wenn man sich so Codes anschaut, versteht man, was da steht, aber selber neu schreiben, ist bei mir noch nicht drin. =)