Bilderslideshow

SELFHTML aktuell Artikel JavaScript Fader-Framework
	Bilderslideshow
	Bilderslideshow Fader mit mehreren Bildern

Bilderslideshow

Nachdem nun der Mechanismus des Überblendens geklärt ist, kann das Konzept ausgeweitet werden, um mehrere Bilder in einer Slideshow anzuzeigen. Dazu werden im Dokument einfach mehrere Bilder definiert, durch die sich das Script hindurcharbeiten muss. Dazu braucht es eine weitere Funktion, die den Bilderwechsel regelt. Der Mechanismus des Überblendens ist im Wesentlichen derselbe.

Fader mit mehreren Bildern

Das folgende Beispiel erweitert unseren einfachen Fader, indem es vier Bilder nacheinander ineinander überblendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Eine Bilderslideshow</title>
    <script type="text/javascript">
        function fade(step) {
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

            step = step || 0;

            imgs[counter].style.opacity = step/100;
            imgs[counter].style.filter = "alpha(opacity=" + step + ")"; // 

            step = step + 2;

            if (step <= 100) {
                window.setTimeout(function () { fade(step); }, 1);
            } else {
                window.setTimeout(next, 2000);
            }
        }

        function next() {
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

            if (typeof(counter) != "number") {
                counter = 0;
            }

            counter++;

            if (counter < imgs.length) {
                fade();
            }
        };
    </script>
    <style type="text/css">
        .next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
        #meinFader { position: relative; }
    </style>
</head><body>
    <h1>Eine Bilderslideshow</h1>
    <p id="meinFader">
        <img src="images/berge1.jpg" alt="">
        <img src="images/berge2.jpg" alt="" class="next">
        <img src="images/berge3.jpg" alt="" class="next">
        <img src="images/berge4.jpg" alt="" class="next">
        <img src="images/berge5.jpg" alt="" class="next">
        <img src="images/berge6.jpg" alt="" class="next">
    </p>
    <p><a href="javascript:next()">Slideshow starten</a></p>
</body></html>

Erläuterung:

Im Unterschied zum vorherigen Beispiel werden hier zwei Funktionen benutzt, die sich die Vorgänge des Überblendens und des Bilderwechsels teilen, nämlich fader und next.

Die Funktion fade benutzt eine globale Variable counter, um das zu überblendende Bild zu ermitteln, anstatt dafür einen festen Wert wie im vorherigen Beispiel zu benutzen. Globale Variablen sind nicht unproblematisch, daher dient counter als globale Variable an dieser Stelle nur als vorübergehende Lösung. Dieser Artikel wird später elegantere Lösungen anbieten.

Nach dem Überblendungsvorgang ruft fade nach einer Pause von 2000 Millisekunden (zwei Sekunden) die Funktion next auf, um ein neues Bild zum Überblenden ermitteln zu lassen.

Die Funktion next ermittelt durch document.getElementById anhand der ID "images" den Textabsatz, indem sich die Bilder für die Slideshow befinden. Die darin enthaltenen Bilder werden über getElementsByTagName ermittelt und in der lokalen Variablen imgs abgelegt. Danach wird überprüft, ob es eine globale Variable counter gibt, die als Zeiger für unser gerade aktuelles Bild dienen wird. Ist sie noch nicht vorhanden, wird sie auf Null gesetzt. Anschließend wird counter um eins erhöht. Sollte counter noch nicht zu groß geworden sein, wird fade aufgerufen, um den Überblendungsvorgang einzuleiten.

Durch das zeitverzögerte gegenseitige Aufrufen der beiden Funktionen wird eine Schleife gestartet. Der Startaufruf erfolgt nach dem Anklicken des Links über die Funktion next. Diese Schleife findet jedoch ihr Ende, wenn counter zu groß geworden ist, sodass keine weiteren Bilder mehr zum Überblenden mehr vorhanden sind, und deshalb fade nicht mehr aufgerufen werden kann.

Beachten Sie:

Der einfacheren Schreibung wegen wurde bei den Bildern auf Inline-Styles verzichtet und stattdessen eine Klasse vergeben. Die Klasse next erhält alle CSS-Eigenschaften, die zuvor über Inline-Styles direkt notiert waren. Je mehr Bilder in der Slideshow angezeigt werden sollen, desto höher würde der Schreibaufwand und die Unübersichtlichkeit des Codes, was mit der Vergabe der Klasse vermieden wird.

Um die Übersichtlichkeit des Codes weiter zu steigern, wurden auch die Inline-Styles im <p>-Element durch eine entsprechende CSS-Regel ersetzt, die das Element über seine ID anspricht.

Nachdem die Slideshow durch Klick auf den "Slideshow starten"-Link gestartet wurde, kann sie durch erneutes Anklicken gestört werden. Denn die Funktion next kann auch während einer Überblendung den Zähler (also die Variablen counter) hochzählen. Das hat unmittelbaren Einfluss auf die Funktion fade, welche ihren angefangenen Überblendungsvorgang mit dem neuen Bild einfach weiterführt. Außerdem werden zusätzliche Timeouts definiert, die sich dann gegenseitig in die Quere kommen. Das kann unerwartete visuelle Effekte haben, jedoch ist dieses Beispielscript auch nur für eine einfache Veranschaulichung ausgelegt. Auf solche Schwächen wird erst später im Artikel eingegangen.

Die Aufteilung der Vorgänge des Überblendens und des Bilderwechsels in zwei separate Funktionen ist eine technische Entscheidung, die man auch anders hätte lösen können. Zum Beispiele hätte fade auch den Bilderwechsel regeln können. Im Hinblick auf spätere Absichten dieses Artikels ist der gewählte Lösungsweg jedoch zweckdienlicher.

Der objektorientierte Ansatz

Überblendungen