oder dem Benutzer die Möglichkeit geben, die Bilder mit Hilfe einer Auswahlbox auswählen zu können.
Voraussetzung:
Grundlegende HTML-Kenntnisse und Kennen von Javascript
Lernziele:
Suchen im Internet nach einschlägigen Quellen und Vorlagen
Adaptierung von bereits bestehenden Programmen (scripts)
Hinführung zum Einsatz von Funktionen und Ansätzen objektorientierten Verständnisses
Gezielter Einsatz von Formulartechnik und Ereignissteuerung
Hier der
HTML und JAVASCRIPT Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
</script>
</HEAD>
<BODY>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center
bgcolor="white">
<b><font face="Verdana">Lernen Sie unsere TeilnehmerInnen kennen!</font></b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="start.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="1.jpg" selected>Bild 01
<option value="2.jpg" selected>Bild 02
...................................................
<option value="19.jpg" selected>Bild 19
<option value="20.jpg" selected>Bild 20
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="|<<" title="Beginn">
<input type=button onClick="previous();" value="<<" title="Vorheriges">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Nächstes">
<input type=button onClick="last();" value=">>|" title="Ende">
</td>
</tr>
</table>
</form>
</center>
</HTML>