Slideshow mit fade-Effekt

D

drabbit

Mitglied
Hallo zusammen,

ich möchte eine Slideshow erstellen, bei der eine einige Bilder nach und nach angezeigt werden und dann automatisch wechseln und nach dem letzten Bild soll wieder von vorne begonnen werden.

Hier ist mal mein Code dafür:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js" ></script>
</head>


<h3>Slide Show:</h3>

<div id="slideshow">
		
		
	<script text="type/javascript">
	
		var bilder = new Array("img/roma_01.jpg", "img/roma_02.jpg", "img/roma_03.jpg");
		

		var naechstesBild = 0;  //Index des nächsten Bildes
		var verzoegerung = 5000;  //Verzögerung in Millisekunden

		function animation() {
		   document.ani.src = bilder[naechstesBild];
		   naechstesBild++;
		   if (naechstesBild==bilder.length) {
				naechstesBild = 0;
			}
			setTimeout("animation();", verzoegerung);
			

		}
	</script>

                        
<div id="swap">

<img src="img/roma_01.jpg" id="ani" width="640" height="200" alt="roma"  />


</div>


Tja und jetzt möchte ich eben dass die Bilder beim wechsel ein- und ausfaden. Ich habe da schon einiges mit scriptaculous mit $('id_of_element').fade(); bzw. $('id_of_element').appear(); versucht. Doch irgendwie klappt das nicht - ich habe nur erreicht, dass das erste Bild gleich ausgefaded wird wenn die Seite geladen wurde.

Ich hoffe ihr könnt mir weiterhelfen.
 
Zuletzt bearbeitet:
Ich habe jetzt wieder darüber nachgedacht - kann das so überhaupt funktionieren?

Da würde ich eher mit display:none arbeiten müssen oder - sonst kann das ja nicht erscheinen oder?

Mal von der Überlegung her müsste ich das erste Bild anzeigen lassen und dann mit fade verschwinden lassen und dann mit appear das nächste anzeigen lassen - usw... Bin ich so auf dem richtigen weg?

Kann ich das ganze dann in eine Schleife einbauen? Welche würde sich da anbieten?
 
Moin,

drabbit hat gesagt.:
Mal von der Überlegung her müsste ich das erste Bild anzeigen lassen und dann mit fade verschwinden lassen und dann mit appear das nächste anzeigen lassen - usw... Bin ich so auf dem richtigen weg?
Zum Vergrößern anklicken....

Jo, bist du...nach dem Fade müsstest du natürlich erst die src des Bildes ändern, am Besten im Callback von fade()
Callback sind Funktionen, die du bei Scriptaculous zu irgendeinem Zeitpunkt einer Funktion aufrufen kannst, z.B. wenn die Animation fertig ist.
Kann ich das ganze dann in eine Schleife einbauen? Welche würde sich da anbieten?
Zum Vergrößern anklicken....

Schleife eher weniger, du benötigst ja eine Zeitverzögerung, da bieten sich setTimeout bzw. setInterval an.
 
Er kann aber doch auch einfach eine Schleife nehmen und in dieser die Zeitverzögerung setzen?!

Meine Lösung wäre:

Eine *for* Schleife die von 1 bis (Anzahlbilder+1) läuft.
(Image+Aktuelle Zahl) wird angezeigt.
Timeout.
(Image+Aktuelle Zahl) wird ausgefadet.

Wenn Anzahlbilder erreicht ist wieder die Zahl auf 1 setzten, somit fängt die Slideshow wieder von Vorn an und läuft endlos.(Die if ans Ende, sonst wird das letzte Bild nicht angezeigt)


Edit: Ich würde nicht ein <img> nehmen und die src ändern, dadurch hast du immer wieder Zwischen-Ladezeiten, Lieber alle Bilder untereinander mit position: absolute und mit den Ids: Image+Anzahl versehen. Dadurch werden die Bilder nacheinander, aber schon am Anfang geladen.
 
Zuletzt bearbeitet:
ähh

set.Timeout(5000) war es glaube ich in "reinem" JS.

warum sollte er nicht einfach

for()
{
fadin();
set.timeOut(5000);
fadout();
if()
{}
}

schreiben können?


Eine Schleife braucht er definitiv. sonst kann er nicht von vorne anfangen ohne den code extrem zu blähen. Die einzige Alternative wäre eine Rekursive Funktion, das wäre aber kein sonderlich guter stil und recht undynamisch(ist die schleife auch nur bedingt - zugegeben.)

Ein Timeout muss doch überall gesetzt werden können, er kann ja auch überall funktionnen aufrufen die alles möglich beinhalten können, so könnte er auch vergehen:
for(i++ iblablub)
{
meinefunc(i)
}

meinefunc(i)
{
fadein bild i
timeout
fadeout bild i
}
 
Zuletzt bearbeitet:
Weil es soetwas in JS nicht gibt, was du dir dort vorstellst.
Du meinst sicher etwas wie sleep() in PHP, soetwas gibt es in js nicht.

ein timeout, platziert zwischen 2 Funktionsaufrufen, hat keinen Einfluss auf die zeitliche Abarbeitung dieser Funktionen
 
ok...

Bin halt kein JS Pro^^(arbeite nur mit jQuery)

Dann würde ich es über ein Callback versuchen(sofern es das in JS gibt..)

for()
{
fadein() callback
{
timeout()callback
{
fadeout
}
}
if()
{}
}

Wenn das nicht geht, hätte ich nur die Lösung(welche mir zumindest in jQuery ausgeholfen hat:

Das Bild was angezeigt wird, über den Zeitraum den es angezeigt wird irgendeinen Wert zu animieren den es schon hat, wodurch die funktion aber nicht abgebrochen wird und dann in der callback Funktion das Fadeout aufzurufen. Klappt mit jQuery wunderbar.

bsw:

Bild.animate({"opacity":1},5000,"",function()
{
Bild.animate({"opacity":0});
});


Das geht Definitiv. Und sowas geht mit JS sicher auch ;D


P.S.: Falls das nicht der Fall sein sollte, müsste die Funktion dann in etwa so aussehen(SOFERN DAS GEHT)

function slideshow()
{
bild 1 fade in
timeout
bild1fadeout
bild2fadein
timeout
bild2 fade out
timeout
slideshow()
}

Diese funktion würde sich selber neustarten
 
Zuletzt bearbeitet:
Hier soll ja scriptaculous zum Einsatz kommen, dort könnte eine Lösung bspw. so aussehen:
Code: 
window.onload=function()//sobald geladen
{
  setInterval(function()
            {
              bilder.push(bilder.shift());//erstes Bild im Array nach hinten verfrachten
              $('ani').fade(//Ausblenden
                            {
                              afterFinish:function(e)//Callback
                                         {
                                          e.element.src=bilder[0];//src des Bildes ändern
                                          e.element.appear();//Bild einblenden
                                         }
                            }
                           );
            },
             5000);//Alle 5 sec aufrufen
}

Die Dauer der Animationen kann man bei deren Aufruf über die Option "duration" festlegen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück