Die Tage tauchte in einem Forum die Frage nach einem JavaScript für einen einfachen, manuellen Bilderwechsel (ohne jegliche Effekte) auf. Nachfolgend der Beispielcode für eine mögliche Umsetzung:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Einfacher Bilderwechsel</title>
<script type="text/javascript">
// Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als
// src angeben!)
var images = new Array(
'bild1.jpg',
'bild2.jpg',
'bild3.jpg',
'bild4.jpg'
);
// Genau wie bei images hier für jedes Bild die Bildbeschreibung in eine Zeile.
var image_descs = new Array(
'Bild 1: Die Erde',
'Bild 2: Natur',
'Bild 3: Sonnenuntergang',
'Bild 4: Karibik'
);
// Aktueller Bildindex (beim Start 0)
var current_index = 0;
// Bilderwechsel durchführen (direction: 0=links, 1=rechts)
function switch_image(direction) {
// Anzahl der Bilder ermitteln
var count = images.length;
// Index je nach Richtung um eins erhöhen oder verringern
current_index += (direction ? 1 : -1);
if (current_index == count) {
// Steht der Index hinter dem letzten Bild, dann zum Anfang
current_index = 0;
} else if (current_index < 0) {
// Steht der Index vor dem ersten Bild, dann zum Ende
current_index = count - 1;
}
// Bild austauschen
document.getElementById('image_switch').src = images[current_index];
// Bildbeschreibung austauschen
document.getElementById('image_desc').innerHTML = image_descs[current_index];
}
</script>
</head>
<body>
<div style="text-align:center">
<!-- Das erste Bild hier als src mit angeben! -->
<img src="bild1.jpg" id="image_switch" alt="" />
<br />
<!-- Die erste Bildbeschreibung hier mit eintragen! -->
<span id="image_desc">Bild 1: Die Erde</span>
<br /><br />
<!-- Bildwechsel nach links -->
<img src="links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" />
<!-- Bildwechsel nach rechts -->
<img src="rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" />
</div>
</body>Wird keine Bildbeschreibung erwünscht, so genügt es folgende 3 Codestücke zu entfernen:
// Genau wie bei images hier für jedes Bild die Bildbeschreibung in eine Zeile.
var image_descs = new Array(
'Bild 1, die Erde',
'Bild 2, abstraktes',
'Bild 3, asteroiden',
'Bild 4, Horizont'
);// Bildbeschreibung austauschen
document.getElementById('image_desc').innerHTML = image_descs[current_index];<!-- Die erste Bildbeschreibung hier mit eintragen! -->
<span id="image_desc">Bild 1, die Erde</span>
