Simon

einfache Slideshow mit Javascript

Für die Seite hausdorfblick.at wollten wir eine Slideshow realisieren, damit ein Foto vom Haus im Winter und eins vom Haus im Sommer angezeigt wird. Dazu machte Martin eine Slideshow mit Flash und ich eine mit Javascript/Jquery. Im folgenden erkläre ich meine Realisierung mit Javascript.

Das Grundprinzip ist einfach: Man setzt alle Bilder in einen div-Container und positioniert sie absolut. Dadurch befinden sich alle Bilder übereinander und man kann sie einfach durch Transparenzeffekte überblenden.

Zuerst ein paar CSS-Klassen, damit man die Elemente später leichter über jquery angesprochen werden können:

<style type="text/css">
.SlideshowImage
{

opacity: 0;
position: absolute;

}

.SlideshowActive
{

opacity: 1;

}
</style>

Die Klasse SlideshowImage ist für alle Bilder der Slideshow. Sie macht sie unsichtbar und positioniert sie absolut. SlideshowActive ist nur für das im Moment sichtbare Bild.

Nun der Aufbau im HTML-Code:

<div id="Slideshow">

<img class="SlideshowImage SlideshowActive"
src="images/05092010098.jpg" alt="Am Illspitz" />

<img class="SlideshowImage" src="images/05092010100.jpg"
alt="David" />

<img class="SlideshowImage" src="images/05092010101.jpg"
alt="Benjamin wollte kein Foto" />

<img class="SlideshowImage" src="images/05092010102.jpg"
alt="das Flussufer" />

<img class="SlideshowImage" src="images/10092010110.jpg"
alt="David" />

<img class="SlideshowImage" src="images/21092010124.jpg"
alt="Foto von einer Katze" />

</div>

Wie zu sehen ist, hat jedes Bild die CSS-Klasse SlideshowImage und nur das aktive Bild hat die Klasse SlideshowActive.

Der Javascript Code:

var SlideshowSpeed = 5000;

$(document).ready(function()
{ setTimeout("SlideshowAnimate();", SlideshowSpeed); });

Zuerst wird eine Geschwindigkeit für den Wechsel der Bilder festgelegt. Hier sind es 5 Sekunden. Dann wird ein Timeout festgelegt, der die Slideshow startet, sobald die Seite vollständig geladen ist.

Hier die wichtigste Funktion, die die Bilder animiert:

function SlideshowAnimate()

{

/* Das aktive Bild holen */

var ActiveImage = $('#Slideshow').children('.SlideshowActive');

/* Ermitteln, an welcher Position sich das jetztige Bild in der Liste
befindet. */

var ActiveIndex = $('#Slideshow').children().index(ActiveImage);

/* Wenn das jetztige Bild das letzte ist, dann von vorne anfangen */

if(ActiveIndex == $('#Slideshow').children().size()-1)

ActiveIndex = -1;

/* Nun das nächste Bild aus der Liste der Bilder holen */

var NextImage = $('#Slideshow').children().eq(ActiveIndex+1);

/* Das nächste Bild auf volle Transparenz animieren und die Klasse
SlideshowActive hinzufügen, damit es beim nächsten Wechsel
wiedergefunden wird. */

NextImage.addClass("SlideshowActive").css(
{ opacity:0 }).animate({ opacity: 1 }, 800);

/* Das jetztige Bild ausblenden und die CSS Klasse entfernen */

ActiveImage.removeClass("SlideshowActive").css(
{ opacity: 1 }).animate({ opacity: 0 }, 800);

/* Timeout setzen, damit wieder das nächste Bild angezeigt wird */

setTimeout("SlideshowAnimate();", SlideshowSpeed);

}

Ein Beispiel kann man auf http://www.get-the-solution.net/media/file/examples/Slideshow/ ansehen.

Das Beispielprojekt kann man auf Skydrive herunterladen:

http://cid-a7082d0a1081e2f0.office.live.com/self.aspx/.Public/Slideshow.zip

(c) 2011 | Impressum |