Florians Forum » Webmaster » Homepage & Anderes » automatische Slideshow mit Navigationsbuttons
#1 automatische Slideshow mit Navigationsbuttons von florian-zier
20.01.2008 02:16
Slideshow für die eigene Homepage mit Navigations-Buttons. (Für das Forum)
Diesen Style zwischen den Head-Tags einfügen:
<style type="text/css">
.slide_box {
display:table-cell;
width:300px; max-width:300px;
height:305px; max-height:305px;
border:groove;
vertical-align:middle;
}
.slide_pic {
max-width:100%;
max-height:100%;
}
</style>
.slide_box {
display:table-cell;
width:300px; max-width:300px;
height:305px; max-height:305px;
border:groove;
vertical-align:middle;
}
.slide_pic {
max-width:100%;
max-height:100%;
}
</style>
Die width- und height-Angaben können nach belieben angepasst werden. Sie geben die Größe des Slideshow-Fensters an. (In Pixeln: px oder Prozent: %)
Die Border-Angabe gibt die Art des Rahmens an. (Beispiele)
Die Klasse slide_pic sorgt dafür, dass das Bild an den Bildrahmen angepasst wird.
Dies funktioniert aber nur im Firefox, nicht in Opera oder IE. Dort wird die Bild-Fläche größer.
Das folgende JavaScript auch zwischen den Head-Tags einfügen:
<script type="text/javascript">
var standard_pic = new Image();
/* Zeit für Bilderwechsel in Millisekunden */
var Zeit = 3000;
/* Bild, das beim Drücken des Stop-Buttons angezeigt wird. */
standard_pic.src = 'http://www.bilder-hochladen.net/files/585t-9.gif';
var i = 0;
function zurueck(me) {
if (i > 0) {
i = i - 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
else if (i == 0) {
i = nr;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
}
function play(me) {
if (i > nr)
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
i = i + 1;
time = setTimeout(function(){play(me);}, Zeit);
}
function pause() {
window.clearTimeout(time);
}
function hold_on(me) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", standard_pic.src);
window.clearTimeout(time);
}
function vor(me) {
if (i != nr) {
i = i + 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
else if (i == nr) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
}
</script>
var standard_pic = new Image();
/* Zeit für Bilderwechsel in Millisekunden */
var Zeit = 3000;
/* Bild, das beim Drücken des Stop-Buttons angezeigt wird. */
standard_pic.src = 'http://www.bilder-hochladen.net/files/585t-9.gif';
var i = 0;
function zurueck(me) {
if (i > 0) {
i = i - 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
else if (i == 0) {
i = nr;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
}
function play(me) {
if (i > nr)
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
i = i + 1;
time = setTimeout(function(){play(me);}, Zeit);
}
function pause() {
window.clearTimeout(time);
}
function hold_on(me) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", standard_pic.src);
window.clearTimeout(time);
}
function vor(me) {
if (i != nr) {
i = i + 1;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
else if (i == nr) {
i = 0;
me.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('div')[0].getElementsByTagName('img')[0].setAttribute("src", bilder[i].src);
}
}
</script>
In diesem Skript kann ganz am Anfang die Zeit für einen Bild-Wechsel angegeben werden. Die Angabe erfolgt in Millisekunden. (1s = 1000ms)
Außerdem kann noch ein selbts gewähltes Bild angegeben werden, dass beim Drücken des Stop-Buttons angezeigt wird.
In den Inhaltsbereich der Seite (zwischen den Body-Tags) kommt nun folgender Quellcode:
<center>
<span style="display:table;"><div align="center" class="slide_box">
<img class="slide_pic" name="slide" src="http://www.bilder-hochladen.net/files/585t-9.gif" alt="Slideshow" />
<script type="text/javascript">
/* Gsamtanzahl der Bilder */
var Anzahl = 3;
var bilder = new Array();
for (j=0; j < Anzahl; j++) {
bilder[j] = new Image();
}
/* Auflistung der Bilder, beginnend mit 0 */
bilder[0].src = "http://server.de/bilder/bild1.gif";
bilder[1].src = "http://server.de/bilder/bild2.gif";
bilder[2].src = "http://server.de/bilder/bild3.gif";
var nr = bilder.length-1;
</script>
</div></span>
<div>
<input type="button" name="zurueck" value="<" onclick="zurueck(this);" />
<input type="button" name="play" value="Play" onclick="play(this);" />
<input type="button" name="pause" value="Pause" onclick="pause();" />
<input type="button" name="stop" value="Stop" onclick="hold_on(this);" />
<input type="button" name="vor" value=">" onclick="vor(this);" />
</div>
<!-- JavaScript deaktiviert -->
<noscript><br /><b>Bitte aktiviere JavaScript, damit die Slideshow funktioniert!</b></noscript>
</center>
<span style="display:table;"><div align="center" class="slide_box">
<img class="slide_pic" name="slide" src="http://www.bilder-hochladen.net/files/585t-9.gif" alt="Slideshow" />
<script type="text/javascript">
/* Gsamtanzahl der Bilder */
var Anzahl = 3;
var bilder = new Array();
for (j=0; j < Anzahl; j++) {
bilder[j] = new Image();
}
/* Auflistung der Bilder, beginnend mit 0 */
bilder[0].src = "http://server.de/bilder/bild1.gif";
bilder[1].src = "http://server.de/bilder/bild2.gif";
bilder[2].src = "http://server.de/bilder/bild3.gif";
var nr = bilder.length-1;
</script>
</div></span>
<div>
<input type="button" name="zurueck" value="<" onclick="zurueck(this);" />
<input type="button" name="play" value="Play" onclick="play(this);" />
<input type="button" name="pause" value="Pause" onclick="pause();" />
<input type="button" name="stop" value="Stop" onclick="hold_on(this);" />
<input type="button" name="vor" value=">" onclick="vor(this);" />
</div>
<!-- JavaScript deaktiviert -->
<noscript><br /><b>Bitte aktiviere JavaScript, damit die Slideshow funktioniert!</b></noscript>
</center>
In der Variable "Anzahl" muss angegeben werden, wie viele Bilder in der Slideshow sein sollen.
Danach müssen die Bilder aufgelistet werden. Hier muss von "0" aus durchnummeriert werden.
Ist JavaScript deaktiviert, bleibt das Anfangs-Bild stehen. Die Buttons haben nun keine Wirkung mehr.
Es erscheint zudem eine Meldung, dass JavaScript aktiviert werden sollte. Soll keine Meldung angezeigt werden, einfach die NoScript-Zeile entfernen.