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

Bilderwechsel

M

m3ndaX

Neues Mitglied
Hallo ich hab ne Frage, und zwar, wenn ich die Bildfolge laufen lasse, dann kommen die ersten 3 Sekungen kein bild.
An was liegt das? Und wie kann man andere Bildübergänge definieren?


HTML: 
<script language="JavaScript"><!--
     
    var Bilder = new Array(" Img1,
                                      Img2,
                                      Img3         ");
    var Delay = 3000;
 
     
    var BildAnzahl = Bilder.length;
    var number = 0;
    BildFolge = new Image(); BildFolge.src = Bilder[number];
     
    function change() {
     
    number++;
    if (number == BildAnzahl) number = 0;
     
    BildFolge.src = Bilder[number];
    document.austausch.src = BildFolge.src;
    }
     
    setInterval("change()", Delay);
     
    //-->
    </script>

Danke schonmal für die Hilfe :)
 
Du musst beim ersten Mal das Bild auch dem img-Element zuweisen:
Code: 
<script language="JavaScript"><!--
     
    var Bilder = new Array(" Img1,
                                      Img2,
                                      Img3         ");
    var Delay = 3000;
 
     
    var BildAnzahl = Bilder.length;
    var number = 0;
    BildFolge = new Image(); BildFolge.src = Bilder[number];
    [B]document.austausch.src = BildFolge.src;[/B]
     
    function change() {
     
    number++;
    if (number == BildAnzahl) number = 0;
     
    BildFolge.src = Bilder[number];
    document.austausch.src = BildFolge.src;
    }
     
    setInterval("change()", Delay);
     
    //-->
    </script>
Wenn Du Übergangseffekte haben willst, musst Du ein Framework wie jQuery einsetzen. Es gibt schon soviele vorgefertigte Slideshows, dass ein Selberprogrammieren nicht lohnt. Ich empfehle z. B. das Cycle-Plugin:
JQuery Cycle Plugin
das hat sehr viele Übergangseffekte und ist sehr flexibel.
Viel Erfolg und viele Grüße - Ulrich
 
Zuletzt bearbeitet von einem Moderator:
Also erstmal danke für die Antwort :)
Aber ich habe es so probiert, wie du es meintest, und ich hab das Problem, dass ich nun alle 4 Bilder nebeneinandern ohne i-welche effekte habe.
Jemand eine idee?

<script type="text/javascript" src"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script>

$(document).ready(function(){
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});

</script>
</head>

<body>


<div class="slideshow">
<img src="Bild1" width="200" height="200" />
<img src="Bild2" width="200" height="200" />
<img src="Bild3" width="200" height="200" />
<img src="Bild4" width="200" height="200" />
</div>

</body>
</html>
 
Achso und ich hab das mit deinem Vorschlag ausprobiert, so funktioniert es nichtmehr...
Also es kommt auch nichtsmehr nach den ersten 3 Sekunden...
Trotzdem Danke, Vielleicht noch andere Vorschläge :)
 
Achso und ich hab das mit deinem Vorschlag ausprobiert, so funktioniert es nichtmehr...
Zum Vergrößern anklicken....
Da ist mir ein Fehler unterlaufen, es muss heißen:
Code: 
window.onload = "document.austausch.src = BildFolge.src;";
 
Aber ich habe es so probiert, wie du es meintest, und ich hab das Problem, dass ich nun alle 4 Bilder nebeneinandern ohne i-welche effekte habe.
Zum Vergrößern anklicken....
Das liegt daran, dass das Plugin nicht funktioniert. Du hast hier ein "=" vergessen:
Code: 
src[B]=[/B]"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben