Bildwechsel 6

<body onLoad="bildwechsel()">
<form>
<input type="button" value="bilder wechseln" onClick=window.location="bildwechsel6.htm">
</form>
<head><SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
Highlight1 = new Image();
Highlight1.src = "img/bild1.gif";

Highlight2 = new Image();
Highlight2.src = "img/bild2.gif";

Highlight3 = new Image();
Highlight3.src = "img/bild3.gif";

Highlight4 = new Image();
Highlight4.src = "img/bild4.gif";

Highlight5 = new Image();
Highlight5.src = "img/bild5.gif";


zahlen=new Array("Highlight1.src", "Highlight2.src", "Highlight3.src", "Highlight4.src", "Highlight5.src");


function bildwechsel(){
for (i=0; i<5; i++) {

zufallszahl = Math.floor(Math.random()*(5-i));
bildo=zahlen[zufallszahl];

window.document.images[i].src =eval(bildo);

zahlen.splice(zufallszahl, 1);
}
}
// -->
</SCRIPT></head>

Hier werden 5 Bilder zufällig gewechselt. Bis zur Funktion dürfte das Script bekannt sein. Es werden die Bildobjekte erzeugt, sowie ein array namens zahlen.
Splice
Bevor ich die Funktion erkläre, noch etwas zu dem Befehl splice. Mit diesem Befehl kann man Elemente aus einem Array löschen. Die Schreibweise ist:
arrayname.splice(startwert, anzahl)
In die Klammern kommen 2 Werte. Der erste bestimmt ab welchem Element gelöscht werden soll. Ist der Wert 0 wird das erste Element gelöscht, 1 das zweite usw. Der zweite Wert bestimmt die Anzahl. Also bei name.splice(1,2) wird das zweite und dritte Element gelöscht. Dadurch rutschen die anderen Elemente einen höher Zum besseren Verständnis folgendes Beispiel
frauen=new Array("Lisa", "Petra", "Sonja", "Bärbel")
nun kommt folgender splice Befehl
frauen.splice(1,1)
Dadurch wird das zweite Element gelöscht, das Array sähe nun folgendermaßen aus:
frauen= new Array("Lisa", "Sonja", "Bärbel")
da die anderen Elemente nun aufrücken ist das zweite Element nun "Sonja" und das dritte "Bärbel".

Die Funktion
function bildwechsel(){
for (i=0; i<5; i++) {

zufallszahl = Math.floor(Math.random()*(5-i));
bildo=zahlen[zufallszahl];
window.document.images[i].src =eval(bildo);
zahlen.splice(zufallszahl, 1);
}
}


Die Funktion beginnt mit einer for Schleife die 5 mal durchlaufen wird.

zufallszahl = Math.floor(Math.random()*(5-i));
es wird eine Zufallszahl zwischen 0 und der Anzahl der Schleifendurchläufe minus i erzeugt.
Das heißt im zweiten Durchlauf ist es eine Zufallszahl zwischen 0 und 3, im dritten zwischen 0 und 2 etc.

bildo=zahlen[zufallszahl];
Die Zufallszahl holt sich das Element aus dem Array namens zahlen.

window.document.images[i].src =eval(bildo);
Dieses Element wird der Reihe nach den Bildern zugewiesen.
images[i]
Ich habe hier wieder Bildnummern anstatt Bildnamen verwendet


zahlen.splice(zufallszahl, 1);
anschließend wird das entsprechende element aus dem array gelöscht

Dadurch wird es kein zweites mal verwendet. Die anderen Elemente rücken alle eins auf. Deshalb kann die Zufallszahl ruhig zweimal vorkommen. Wichtig ist nur dass bei jedem Schleifendurchlauf die Zufallszahl nicht höher ist, als die Anzahl der Elemente, welche bei jedem Schleifendurchlauf um 1 verringert wird.. Durch 5-i siehe oben, ist das gewährleistet.