nicht angemeldet
"Bilderwechsel" mit Timer für Online-Shop
0 
suit
0 
Gunnar Bittersmann
0 0
"Bilderwechsel" mit Timer für Online-Shop
Hallihallo,
Also ich bin gerade am programmieren für den Shop eines Freundes, und zwar möchte ich ihm da ein kleines Script basteln, das im 4-Sekunden-Takt das das Bild wechselt, zwischen einigen zuvor definierten Bildern.
Jetzt hab ich also den folgenden Code geschrieben:
<p>
<img src="/data/..../bild1.jpg" width="400">
<script type="text/javascript"> //<![CDATA[
var b = new Array();
b[0] = new Image();
b[0].src = "http://www.simion-möbel.at/..../bild1.jpg";
b[1] = new Image();
b[1].src = "http://www.simion-möbel.at/..../bild2.jpg";
b[2] = new Image();
b[2].src = "http://www.simion-möbel.at/..../bild3.jpg";
b[3] = new Image();
b[3].src = "http://www.simion-möbel.at/..../bild4.jpg";
var i = 0;
function drehen()
{
if ( i > 3)
i = 0;
document.images[0].src = b[i].src;
i = i+1;
window.setTimeout("drehen()", 4000);
}
window.setTimeout("drehen()", 4000);
//]]>
</script>
</p>
So... soweit sollte der Code ja eigentlich (meiner Meinung nach) funktionieren...
Das erste Bild (bild1.jpg) wird auch problemlos angezeigt!
Jedoch wird der Timer, bzw. die Änderung des Bilds garnicht ausgeführt. Ich bin jetzt aber relativ planlos, woran das liegen kann.
Weglassen des "http://www.simion-möbel.at", also das schreiben ausschließlich mit /data, so wie das beim Bild am anfang gemacht wurde hat auch keinerlei Effekt...
Bitte um hilfe!
-
@@BumBum:
nuqneH
<img src="/data/..../bild1.jpg" width="400">
<script type="text/javascript"> //<![CDATA[Die zwei Zeilen widersprechen sich. Schreibst du HTML oder XHTML? Im ersten Fall ist die zweite Zeile unsinnig, in zweiten die erste falsch. (Unterschiede: <http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente@title=leere Elemente>, <http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=Inhalt von Script- und Style-Bereichen>)
Und wenn du nicht (X)HTML5 schreibst, fehlt das @alt-Attribut fürs 'img'.
So... soweit sollte der Code ja eigentlich (meiner Meinung nach) funktionieren...
Ja, tut’s auch. (Lokal mit eigenen Bildern getestet.) Vermutlich stimmen deine Pfade zu den Bildern nicht. Da du die unkenntlich gemacht hast, kann man dir kaum weiterhelfen.
Übrigens: Der erste sichtbare Bildwechsel erfolgt erst nach 8 Sekunden, weil dein Script als erstes bild1.jpg mit bild1.jpg „ersetzt“.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Also ich bin gerade am programmieren für den Shop eines Freundes, und zwar möchte ich ihm da ein kleines Script basteln, das im 4-Sekunden-Takt das das Bild wechselt, zwischen einigen zuvor definierten Bildern.
Ich habe das hier sinngemäß so gelöst
<html> <head></head> <body> <img name="bild" src="http://lotharmelching.de/homepage_chor/bilder/chorfotos/classics.jpg" width="400"> <script type="text/javascript"> var b = ["http://lotharmelching.de/homepage_chor/bilder/chorfotos/classics.jpg", "http://lotharmelching.de/homepage_chor/bilder/chorfotos/cantate.jpg", "http://lotharmelching.de/homepage_chor/bilder/chorfotos/bunteblaetter.jpg", "http://lotharmelching.de/homepage_chor/bilder/chorfotos/gruppenbild08.jpg"], i = 4; function drehen() { i = (i === 4) ? 1 : i + 1; document.bild.src = b[i-1]; window.setTimeout("drehen()", 4000); } drehen(); </script> </body> </html>Bei den Bildquellen reichen natürlich die relativen Adressen, und das CDATA brauchst Du auch nur in XHTML.
-
Vielen dank für die Antwort!
Habe den Code jetzt soweit auch abgeändert, leider ohne Erfolg...
Habe jetzt auch nochmal einen neuen Code versucht (diesmal auch ohne "Zensur" der jeweiligen Bild-Pfade:
<p><img src="/data/pics/user/pics/modern_sypialnia_szary_dab_800px.jpg" alt="" width="400" /> <script type="text/javascript">// <![CDATA[ var b = ["/data/pics/user/pics/modern_sypialnia_szary_dab_800px.jpg", "/data/pics/user/pics/modern_sypialnia_nadstawka_800px.jpg", "/data/pics/user/pics/modern_jadalnia_szary_dab_800px.jpg", "data/pics/user/pics/modern_sypialnia_nadstawka_800px.jpg"], i = 0; function drehen() { document.bild.src = b[i]; i = i+1; if(i === 4) { i = 0;} window.setTimeout("drehen()", 4000); } drehen(); // ]]></script> </p>Das CDATA schreibt leider die Shop-Software in welche der Code-Ausschnitt eingefügt werden soll selbst dazu, darauf habe ich keinen Einfluss.
Habe auserdem noch den URL angefügt, unter welchem der Code ausgeführt werden sollte...
lg BumBum
-
@@BumBum:
nuqneH
var b = ["/data/pics/user/pics/modern_sypialnia_szary_dab_800px.jpg",
"/data/pics/user/pics/modern_sypialnia_nadstawka_800px.jpg",
"/data/pics/user/pics/modern_jadalnia_szary_dab_800px.jpg",
"data/pics/user/pics/modern_sypialnia_nadstawka_800px.jpg"],Schau dir mal die Adresse des letzten Bildes an und vergleiche mit den anderen!
document.bild.src = b[i];
Und schau mal in die Fehlerkonsole deines Browsers!
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hi there,
b[0].src = "http://www.simion-möbel.at/..../bild1.jpg";
Vielleicht liegts ja an der komischen URI?