Website selber erstellen - Tools, Widgets, Zubehör
Nachfolgend der Code des Javascripts.
<script type="text/javascript">
pictures = new Array(
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg",
"http://selber-machen-homepage.de/katzen/andy4wochen.jpg",
"http://selber-machen-homepage.de/katzen/artur4wochen.jpg",
"http://selber-machen-homepage.de/katzen/aron4wochen.jpg",
"http://selber-machen-homepage.de/katzen/annabell4wochen.jpg",
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg");
i = 0;
anz = 6;
bild = i + 1 + " von " +anz;
function loadpic(a) {
document.images['image'].src = pictures[a];
i=a;
bildsetzen();
}
function bildsetzen() {
bild = i + 1 + " von " + anz;
document.getElementById('bildnummer').innerHTML = bild;
}
function imgback (){
if (i>0) { loadpic(--i); }
else { i = anz - 1; loadpic(i);
};
bildsetzen();
}
function imgvor (){
if (i<pictures.length-1) { loadpic(++i); }
else { i = 0; loadpic(i); };
bildsetzen();
}
</script>
<style type="text/css">
.imgbox{padding=5px; background:#cccccc; text-align:center; vertical-align:center;}
.imgbox:hover{background:#555; }
</style>
Im Code findet man die gleichen Funktionen wie in den vorigen Beispielen. Ein einfaches Vor- bzw. Rücksetzen des Bildindizes, die Zusammensetzung der Bildnummernausgabe und die loadpic()-Funktion die das Bild wechselt. Das Bildsetzen (Nummernanzeige) wurde hier als separate Funktion erstellt und erhält den Parameter a für die Bildnummer, damit die Ausgabe auch stimmt, wenn statt der Wechselbutton die Bilder zum Wechseln benutzt werden.
Verzichtet man auf die manuellen Vor- und Zurückbutton und die Nummernanzeige, benötigt man nur noch die loadpic()-Funktion und der Code würde (Anzeigebeispiel unten) nur noch so aussehen: (Das ist erfreulich wenig)
<script type="text/javascript">
pictures = new Array(
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg",
"http://selber-machen-homepage.de/katzen/andy4wochen.jpg",
"http://selber-machen-homepage.de/katzen/artur4wochen.jpg",
"http://selber-machen-homepage.de/katzen/aron4wochen.jpg",
"http://selber-machen-homepage.de/katzen/annabell4wochen.jpg",
"http://selber-machen-homepage.de/katzen/amor4wochen.jpg");
function loadpic(a) {
document.images['image'].src = pictures[a];
}
</script>
<style type="text/css">
.imgbox{padding=5px; background:#cccccc; text-align:center; vertical-align:center;}
.imgbox:hover{background:#555; }
</style>