Dateiversion:
|
diesen Beitrag diskutieren,ergänzen, eine Frage stellen |
|
|
Homepagebau |
|
|
||
|
|
||||||
JavaScript Galerie
Schwierigkeit: für Anfänger
Beispiel für eine Bildergalerie mit Slideshow:
Sie kennen das Problem: viele (große) Bilder auf der Homepage ablegen. Das sieht unprofessionell aus, die Seite lädt ewig und eigentlich wünscht man sich eine elegante Lösung - ohne viel Aufwand.
<center>Wir gruppieren alle wichtigen Elemente mit einem Formulartag. Die ID benötigen wir für die Adressierung in JavaScript.
<form name="form" id="form">
<p>Schaltflächen für "vor" und "zurück" + "Slideshow"
<input id="zurueck" type="button" value="<"
onClick="clearTimeout(timer); if (i>0) { LoadPic(--i) };">
<input id="Slideshow" type="button" value="Slideshow"
onClick="i=0; SlideShow(i);">
<input id="vor" type="button" value=">"
onClick="clearTimeout(timer);
if (i<pictures.length-1) { LoadPic(++i) };">
<p>Das Corpus delicti: die Platzhalter für das Bild und die Bildunterschrift
<img id="image" src=""><br>
<input id="text" type="text" size="40"
style="background-color: #FFFFFF; text-align: center;
border-style: solid; border-width: 0" readonly>
</form>
</center>
<script language="JavaScript">
<!--Wir legen 2 leere Arrays an ...
names = new Array();
pictures = new Array();... und speichern darin alle Daten zu unseren Bildern
names[0] = "Bildunterschrift 1";
pictures[0] = "Bild-URL 1";
names[1] = "Bildunterschrift 2";
pictures[1] = "Bild-URL 2";
...(Hilfsvariablen; i = Nummer des gerade geladenen Bildes)
var i = 0;
var timer;Wir beschreiben nun eine Funktion, die das Bild mit der Nummer "a" lädt
function LoadPic(a) {Ein schönes Beispiel für eine Zuweisung in JavaScript.
Wie sie sehen, ist die Adressierung der HTML-Objekte in JavaScript hierarchisch.
"document" steht für den "Body". "form" ist die ID unseres Formulars (siehe oben).
Danach stehen die IDs (die Namen) der Objekte.
document.images['image'].src = pictures[a];
document.form.text.value = names[a]; };Bleibt noch die Slideshow. Eigentlich genau die Funktion "LoadPic", die wir zeitverzögert immer wieder aufrufen wollen.
function SlideShow(a) {
LoadPic(a);
if (i<pictures.length-1) {Die Funktion "setTimeout()" wird sie in JavaScript auf Schritt und Tritt verfolgen.
Syntax: ID-Wert = setTimeout("auszuführende JavaScriptbefehle", "Zeitverzögerung in Millisekunden")
Beachten sie, dass sie mit der Funktion "clearTimeout()" die Ausführung vorzeitig abbrechen können.
Syntax: clearTimeout(ID-Wert)
timer = setTimeout("SlideShow(++i);", 3000); };
};"Autostart" - das erste Bild soll geladen werden.
LoadPic(0);
//-->
</script>
Porbleme mit dem Skript? Kein Problem! Daten eingeben, Knopf drücken und dein Skript wird automatisch für dich erstellt. Und: du kannst es gleich ausprobieren.