Slide-Show 02-A   (Autostart oder Start- + Stopbuttons)

Automatisch gestarteter Bildwechsel für Grafiken und Fotos mit identischer Bildgröße. Die Slideshow kann per Mausklick angehalten und fortgesetzt werden.

• wahlweise automatischer Start
• scriptgesteuertes Blättern / automatische Diashow
• mit Start- / Stop-Funktion
• einstellbare Zeit für die Anzeigeintervalle
• einsetzbar für bis zu 999 Grafiken
• die Grafiken werden vorgeladen

Ein Script von 'ShuvoRim' habe ich modifiziert. Das ursprüngliche Script war nur anwendbar, wenn die zu tauschende Grafik die erste Grafik der HTML-Seite war. Der Bezug auf das zu tauschende Bild wurde mit dem Befehl document.images[0].src = img[counter].src; hergestellt. Das funktioniert aber nur, wenn das 'Tauschbild' das Image Nr. 1 (für JavaScript die Grafik mit der Indexnummer 0) im Browserinternen Register der Bildobjekte ist. Für einen HTML-Änfänger war das Sript in dieser Form unbrauchbar. Steht das Image nicht an erster Stelle des internen Registers, müsste man die Anzahl der vorangestellten Images ermitteln und diesen Wert (minus 1) im Script eintragen. Das wäre natürlich auch auf jeder Seite ein unterschiedlicher Wert, die Arbeit fehlerträchtig und mühsam. Demo originales Script im Window öffnen

Meine Modifikationen

1. Ich vergebe nun eine ID für das auszutauschende Image (id="Bild01") und spreche im Script für den Bildtausch das Image mit der ID an ...
   
   document.getElementById("Bild01")
   
   ... und vereinfache so die Anwendung.
   
   
2. Variante mit Autostart, Variante mit festem Verzögerungswert
   
   
3. Formatierung der Formularbuttons mittels CSS (nicht für NS4.x)
4. Initialisierung

• Die Grafiken haben die gleichen Abmessungen (Breite + Höhe),
• sie sind alle im gleichen Verzeichnis abgelegt,
• haben identische Dateinamen mit fortlaufender dreistelliger Nummer am Ende

<input class="blau01" type="button"

.blau01 {
 height:18px;
 width:80px;
 font-family:Verdana,sans;
 font-size:10px;
 color:#FFFFFF;
 border:none;
 border-bottom:1px solid #1D56A7;
 border-right:1px solid #1D56A7;
 background-image:url(b200-16.gif);
 cursor: pointer;
}

<input class="blau02" type="button"

.blau02 {
 font-family:Verdana,sans-seif;
 font-size:11px;
 color:#FFFFFF;
 text-align:center;
 border-style:1px solid #006A00;
 background-color: #7AB9EF;
 width:80px;
 height:20px;
 vertical-align: middle;
 cursor: pointer;
}

• Schrift
• Schriftgröße
• Ränder
• Randfarbe
• Elemetbreite
• Elementhöhe
• Hintergrund

.butt {
background-color:#EFEFEF;
color:#000000;
width:100px;
height:26px;
font-size: 12px;
margin:0px;
padding:2px;
cursor: pointer;
border: 2px outset #BFBFBF;
}

input[disabled]
{
color:#FFFFFF;
cursor: default;
}

Version 2-A	AutoStart Start- + Stopbuttons	Beispiel / Demo
Version 2-B	AutoStart keine Buttons	Beispiel / Demo
Version 2-C	manueller Start Anhalten- + Weiter-Buttons, Bildnummer	Beispiel / Demo