wechselnde Bilder .... klappt mit kleinem Fehler ...

SimplyFred

Ich habe nachfolgendes JavaScript am Laufen.
Das JavaScript wechselt automatisch Bilder. Das tut es auch, allerdings, wenn man die Seite aufruft, wird zuerst "nichts" angezeigt, dann kommt bild2 als erstes. Dann läuft es in der Schleife sauber durch ...

Bin kein JavaScript-König und weiß nicht, wo ich dies abstellen kann.
Hoffe auf Hilfe ...

HTML

<html>
 <head>


<script type="text/javascript">


var Geschwindigkeit = 5000 , aktuell = 1;


if (document.images) {
 link = new Array();


 bild1 = new Image();
 bild1.src = "bilder/bild1.png";
 link[1] = "http://www.test1.de";


 bild2 = new Image();
 bild2.src = "bilder/bild2.png";
 link[2] = "http://www.test2.de";


 bild3 = new Image();
 bild3.src = "bilder/bild3.png";
 link[3] = "http://www.test3.de";


 bild4 = new Image();
 bild4.src = "bilder/bild4.jpg";
 link[4] = "http://www.test4.de";
}


var anzahl = link.length-1;


function Bilderwechsel(){
 if (aktuell == anzahl)
  aktuell = 0; aktuell++;
  document.images['Banner'].src = window['bild' + aktuell].src;
  setTimeout ('Bilderwechsel()', Geschwindigkeit)
}


function neueSeite(){
 if (document.images)
 top.location.href = link[aktuell]
}
//-->
</script>


</head>
<body onLoad="setTimeout ('Bilderwechsel()', Geschwindigkeit)">




<div align=center>
 <a href="javascript:neueSeite()" onClick="this.href=link[aktuell]; this.target='_blank'">
  <img name="Banner"  border=0>
 </a>
</div>


</body>
</html>

Alles anzeigen

Grevas

"aktuell" ist beim ersten durchlauf = 2

Du setzt aktuell ganz am anfang auf 1, bevor du irgendwas machst wird aber im Script direkt aktuell um 1 erhöht (aktuell++; ).
Lösung: entweder aktuell am Anfang auf 0 setzen statt auf 1 oder die Inkrementation erst am Ende der Funktion durchführen lassen.

Das "nichts" angezeigt wird lässt sich mit Javascript nicht umgehen, dieser wird erst ausgeführt sobald die Seite komplett geladen ist.
Abhilfe: du setzt ein Standard Bild im HTML code und änderst dieses dann mit deiner Funktion. Allerdings wohl nur sinnvoll, falls deine Seite ein "bisl" größer ist und die Stelle schnell geladen werden soll, einfach weiterlesen

Zusätzlich setzt du ein Timer auf 5 Sekunden, also wird die Funktion erst nach 5 Sekunden das erste mal ausgeführt.
Lösung: Geschwindigkeit auf 0 setzen und beim aufruf der Funktion die Geschwindigkeit auf dein Wunschwert anpassen lassen.

SimplyFred

Zitat von Grevas

Das "nichts" angezeigt wird lässt sich mit Javascript nicht umgehen, dieser wird erst ausgeführt sobald die Seite komplett geladen ist.
Abhilfe: du setzt ein Standard Bild im HTML code und änderst dieses dann mit deiner Funktion. Allerdings wohl nur sinnvoll, falls deine Seite ein "bisl" größer ist und die Stelle schnell geladen werden soll, einfach weiterlesen

Zusätzlich setzt du ein Timer auf 5 Sekunden, also wird die Funktion erst nach 5 Sekunden das erste mal ausgeführt.
Lösung: Geschwindigkeit auf 0 setzen und beim aufruf der Funktion die Geschwindigkeit auf dein Wunschwert anpassen lassen.

Wie kann ich das genau umsetzen?
mit

Code

<img src="bilder/bild1.png">

bleibt das Bild natürlich stehen und die anderen überdecken das, aber eben nicht genau, weil die Grössen unterschiedlich sind ...

Grevas

...

HTML

<img name="Banner" src="bilder/bild1.png" border=0>

dann brauchste auch aktuell nicht zu verändern.

SimplyFred

So habe ich es probiert, geht leider auch nicht - das erste bild bleibt dennoch stehen ...

Code

<div id="werbeseite-1-6" style="left: 77px; top: 33px; width: 90px; height: 59px; bottom: 941px;">
  <div style="width: 99px; height: 26px" class="style2">
<img name="Banner" src="bilder/bild1.png" border=0>


<script type="text/javascript">


var Geschwindigkeit = 5000 , aktuell = 1;


if (document.images) {
 link = new Array();


 bild1 = new Image();
 bild1.src = "bilder/bild1.png";
 link[1] = "http://www.test1.de";


 bild2 = new Image();
 bild2.src = "bilder/bild2.png";
 link[2] = "http://www.test2.de";


 bild3 = new Image();
 bild3.src = "bilder/bild3.png";
 link[3] = "http://www.test3.de";


 bild4 = new Image();
 bild4.src = "bilder/bild4.jpg";
 link[4] = "http://www.test4.de";
}


var anzahl = link.length-1;


function Bilderwechsel(){
 if (aktuell == anzahl)
  aktuell = 0; aktuell++;
  document.images['Banner'].src = window['bild' + aktuell].src;
  setTimeout ('Bilderwechsel()', Geschwindigkeit)
}


function neueSeite(){
 if (document.images)
 top.location.href = link[aktuell]
}
//-->
</script>


</head>
<body onLoad="setTimeout ('Bilderwechsel()', Geschwindigkeit)">




<div align=center>
 <a href="javascript:neueSeite()" onClick="this.href=link[aktuell]; this.target='_blank'">
  <img name="Banner"  border=0>
 </a>
</div>


</body>
</html>

Alles anzeigen

Grevas

Wie es bleibt stehen? Ich dachte dein script da funktioniert? ...

Und warum du das hier in den Header haust, will ich garnet erst wissen.

HTML

<div id="werbeseite-1-6" style="left: 77px; top: 33px; width: 90px; height: 59px; bottom: 941px;">
  <div style="width: 99px; height: 26px" class="style2">
<img name="Banner" src="bilder/bild1.png" border=0>

SimplyFred

Sorry,
da ist mir ein Fehler unterlaufen mit Copy&Paste
So sieht es aus:

Code

<script type="text/javascript">


var Geschwindigkeit = 5000 , aktuell = 1;


if (document.images) {
 link = new Array();


 bild1 = new Image();
 bild1.src = "bilder/bild1.png";
 link[1] = "http://www.test1.de";


 bild2 = new Image();
 bild2.src = "bilder/bild2.png";
 link[2] = "http://www.test2.de";


 bild3 = new Image();
 bild3.src = "bilder/bild3.png";
 link[3] = "http://www.test3.de";


 bild4 = new Image();
 bild4.src = "bilder/bild4.jpg";
 link[4] = "http://www.test4.de";
}


var anzahl = link.length-1;


function Bilderwechsel(){
 if (aktuell == anzahl)
  aktuell = 0; aktuell++;
  document.images['Banner'].src = window['bild' + aktuell].src;
  setTimeout ('Bilderwechsel()', Geschwindigkeit)
}


function neueSeite(){
 if (document.images)
 top.location.href = link[aktuell]
}
//-->
</script>


</head>
<body onLoad="setTimeout ('Bilderwechsel()', Geschwindigkeit)">




<div align=center>
 <a href="javascript:neueSeite()" onClick="this.href=link[aktuell]; this.target='_blank'">
  <img name="Banner" src="bilder/bild1.png" border=0>


 </a>
</div>


Damit bleibt "bilder/bild1.png" angezeigt, aber es wechselt nichts mehr ...
</body>
</html>

Alles anzeigen

SimplyFred

Sorry , es läuft!!!!!!!

Ich hatte nochmals einen Copy&Paste-Fehler - ist nun spät - ich sollte aufhören!

Hauptsache es läuft nun endlich, Dir "Grevas" vielen Dank für Deine Hilfe, hast mich auf die richtige Spur gebracht !

Grevas

Gerngeschehen und ja, ich kenn das

wechselnde Bilder .... klappt mit kleinem Fehler ...

Tags

Benutzer online in diesem Thema