Diashow manuell/auto
biefer.com Diashow
Diese Diashow bedingt, dass alle Bilddateinamen durchnummeriert sind. Die Dateiendung kann jpg oder gif sein, aber innerhalb einer Show immer die Gleiche. Die Anzahl Bilder ist beliebig, muss aber bekannt sein. Zusätzliche Funktionalitäten umfassen einen Preload und die manuelle Bedienung. Die Diashow kann begutachtet werden auf biefer.com.
Bedingungen damit diese Funktionen funktionieren:
Funktionsaufruf diaIgnition() im Bodytag onload, mit den Parametern: TotalAnzahlBilder und Dateiendung.
Alle Bilder im Unterordner 'images' sind durchnummeriert, beginnend mit 1 (nicht zweistellig beginnen).
Das Urbild muss name='myPicture' haben.
Dieses Script kann extern sein und dann eingebunden werden.
Die globalen Variablen initialisieren und empfangen
// initialisieren von Variablen
imgtot = 10;
imgend = "gif";
i = 1;
flag="play";
// empfangen von Variablen
function diaIgnition(tot,end) {
imgtot = tot;
imgend = end;
diaAuto(); // starten der eigentlichen diashow funktion
}
Die Funktion ist kurz und knackig
setTimeout();
function diaAuto() {
document.myPicture.src = "images/"+i+"."+imgend;
if (i < imgtot) { // solange die Variable i kleiner ist als die Bildzahl
i += 1; // rechne zu i 1 dazu
} else { // sonst, also nach dem letzten Bild
i = 1; // wird die Variable i wieder auf 1 gesetzt
}
thisPic = i; // aktuelles Bild für Manuelle Diashow
if (flag=="play") {
setTimeout("diaAuto()",2000); // zeitliche Verzögerung um Millisekunden
}
} // END Funktion 'diaAuto()'
Stopper und Starter
eine Flag setzen
// Stop Automatische Diashow
function stopper() {
showhide ();
flag="stop";
i -= 2;
diaAuto();
}
// Start Automatische Diashow
function starter() {
showhide ();
flag="play";
// i -= 1;
diaAuto();
}
Manuelle Diashow
function diaManu(direction) {
if (document.images) {
thisPic = thisPic + direction;
if (thisPic > imgtot) {
thisPic = 1;
}
if (thisPic < 1) {
thisPic = imgtot;
}
document.myPicture.src= "images/"+thisPic+"."+imgend;;
i=thisPic; // aktuelles Bild für Automatische Diashow
}
}
Verstecken / zeigen der Manuellen Bedienung
document.getElementById
function showhide () { // start function
if (document.getElementById) { // start if browser knows DOM
if (document.getElementById("pause").style.display == "inline") {
document.getElementById("pause").style.display = "none";
document.getElementById("play").style.display = "inline";
}
else if (document.getElementById("pause").style.display == "none") {
document.getElementById("pause").style.display = "inline";
document.getElementById("play").style.display = "none";
}
} // end if browser
} // end function
Preloader
new Image()
<script type="text/JavaScript">
var anzahl = imgtot; // eine Variable anzahl bekommt den Wert von der globalen Variablen imgtot
bild = new Array(anzahl); // ein Array für Bilder wird bereitgestellt
for (j=1; j <= anzahl; j++) { // j ist 1; solange j kleiner als anzahl ist; zähle 1 hinzu (j weil i weiter oben schon besetzt wurde)
bild[j] = new Image(); // Image-Objekte Konstruktor
/* die Objekte bekommen nun eine Quellenangabe: Ordnerpfad+Bildnummer+Endung */
bild[j].src = "showxy/"+ j + imgend; // imgend ist die zweite globale Variable
}
</script>
The show must go on
Die Diashow wird durch den Eventhandler angestossen, als Parameter werden die TotalAnzahlBilder und die Dateiendung mitgegeben:
<body onLoad="diaIgnition(15,'jpg');">
Der HTML Code für die Bedienung:
<span id="pause" style="display:inline"> | <a href="javascript:stopper()">Manuelle Bedienung</a> |</span> <span id="play" style="display:none"><a href="javascript:diaManu(-1)"><< Back</a> | <a href="javascript:starter()">Play</a> | <a href="javascript:diaManu(1)">Next >></a></span>
Der HTML Code für das Bild:
<img class="diashow" name="myPicture" src="showxy/1.jpg" width="600" height="450" alt="Slideshow">
Check den Code.