RETROZONE

Code: Alles auswählen

<script type="text/javascript">

// Die folgenden Parameter sind zum ändern gedacht:

// Eine "Liste" mit den Bild-URL erstellen,
// welche angezeigt werden sollen
var pictureArray = new Array('bild1','bild2','bild3');

// Die Seite, die geladen werden soll,
// nachdem alle Bilder angezeigt wurden
var pageToLoad = 'http://www.google.de';

// Die ID des IMG-Tags, bei welchem 
// die Bilder ausgetauscht werden sollen
var idToExchange = 'gross';

// Ab hier nix ändern (außer evtl. window.open())

// den Zähler initialisieren
var counter = 0;

function exchangePic() {
  if (counter == pictureArray.length) {
    // Sollten alle Bilder durch sein, 
    // neue Seite laden
    document.location.href = pageToLoad;

    // Wenn du die Seite in 'nem neuen Fenster
    // öffnen willst, solltest du
    // window.open() verwenden
    // Infos zu window.open() gibt's hier:
    // http://selfhtml.teamone.de/javascript/objekte/window.htm#open

    // window.open(pageToLoad, 'Fenstertitel', '');
  }
  else {
    // Sonst das Bild ersetzen
    document.getElementById(idToExchange).src = pictureArray[counter];

    // Und den Zähler erhöhen, damit ein anderes Bild angezeigt wird.
    counter++;
  }
}
</script>

Code: Alles auswählen

<img src="bild.png" id="gross" onclick="exchangePic();" />

Code: Alles auswählen

counter--;

Code: Alles auswählen

counter++;

Code: Alles auswählen

counter=0;

Code: Alles auswählen

counter=1;

Code: Alles auswählen

if (counter = pictureArray.length)

Code: Alles auswählen

if (counter == pictureArray.length)

Code: Alles auswählen

<script type="text/javascript"> 
// Die folgenden Parameter sind zum ändern gedacht: 

// Eine "Liste" mit den Bild-URL erstellen, 
// welche angezeigt werden sollen 
var pictureArray = new Array('bild1','bild2','bild3'); 

// Die ID des IMG-Tags, bei welchem 
// die Bilder ausgetauscht werden sollen 
var idToExchange = 'gross';

// Ab hier nix ändern (außer evtl. window.open()) 

// Welches Bild wird aktuell angezeigt
var currentPicNr = 0; 

// Zeigt das Bild mit der Nr. "nr" gross an
function showPic(nr) {
	document.getElementById(idToExchange).src = pictureArray[nr];
}

// Zeigt das nächste Bild in der Reihenfolge an
function nextPic() {
	// Zähler erhöhen (da nächstes Bild)
	currentPicNr++;
	
	// Überprüfen ob "currentPicNr" auf ein gültiges Bild verweist
	if (currentPicNr >= pictureArray.length) {
		currentPicNr--;
		return;
	}
	
	// Bild anzeigen
	showPic(currentPicNr);
}

// Zeigt das vorherige Bild an
function previousPic() {
	currentPicNr--;
	if (currentPicNr < 0) {
		currentPicNr++;
		return;
	}
	showPic(currentPicNr);
}

// Zeigt das letzte Bild an
function lastPic() {
	// Springt auf den letzten Eintrag (n-1)
	// Sollten 10 Einträge vorhanden sein,
	// gibt .length 10 zurück, es sind aber
	// Einträge von 0-9 vorhanden, daher -1
	currentPicNr = pictureArray.length-1;
	
	showPic(currentPicNr);
}

// Zeigt das erste Bild an
function firstPic() {
	// Springt auf den Eintrag 0 (der erste Eintrag,
	// man fängt hier aber immer bei 0 an zu Zählen)
	// im Array currentPicNr.
	currentPicNr = 0;
	
	showPic(currentPicNr);
}

</script>

Code: Alles auswählen

<input type="button" value="|<" onclick="firstPic();">
<input type="button" value="<" onclick="previousPic();">
<input type="button" value=">" onclick="nextPic();">
<input type="button" value=">|" onclick="lastPic();">