Problem mit setTimeout

M

Masterraven9

Grünschnabel
Hy,

ich hab ein Problem mit einem kleinen script was ich schreiben will.

Also ich hätte gern ein Bild und überhalb dieses Bildes sollen fünf einzelne Bilder nebeneinander stehen (Zahlen von 1-5).
Das untere Bild ändert sich nach bestimmter Zeit (es sind auch fünf Bilder).

Nun hab ich das setTimeout so geschrieben das ein automatischer Bildwechsel alle zwei Sekunden vollzogen wird, was auch funktioniert.

Nun hät ich gern das wenn ich auf ein Bild der oberen Reihe mit der Mouse gehe (onmouseover) das Script für den Bildwechsel gestoppt wird und auf ein bestimmtes Bild gewechselt wird.
Und wenn die Mouse aus dem Bild der oberen Reihe geht (onmouseout) soll der Bildwechsel wieder gestartet werden.


Code:

<html>
<head>

<script language="JavaScript">

bildername = "pic";
bilderanzahl = 5;

verzoegerung = 2000;
bildNummer = 2;

bilder= new Array();

bilder[1] = new Image();
bilder[1].src = "pic1.jpg";
bilder[2] = new Image();
bilder[2].src = "pic2.jpg";
bilder[3] = new Image();
bilder[3].src = "pic3.jpg";
bilder[4] = new Image();
bilder[4].src = "pic4.jpg";
bilder[5] = new Image();
bilder[5].src = "pic5.jpg";

function nextpic() {
document.animation.src = bilder[bildNummer].src;
bildNummer++;
if (bildNummer > bilderanzahl) bildNummer = 1;
}


function changepic(nr) {
if(nr != 0)
{
stopRotor();
document.animation.src = bilder[nr].src;
}
}

function stopRotor() {
window.clearTimeout (rotor);
}

function startrotor() {
rotor=setTimeout ('nextpic()', verzoegerung);
}


</script>
</head>
<body link="black" vlink="black" alink="black">
<table border="1">
<tr>
<td><img src="num1.jpg" name="num1" onmouseover="changepic(1)" onmouseout="startrotor()"></td>
<td><img src="num2.jpg" name="num2" onmouseover="changepic(2)" onmouseout="startrotor()"></td>
<td><img src="num3.jpg" name="num3" onmouseover="changepic(3)" onmouseout="startrotor()"></td>
<td><img src="num4.jpg" name="num4" onmouseover="changepic(4)" onmouseout="startrotor()"></td>
<td><img src="num5.jpg" name="num5" onmouseover="changepic(5)" onmouseout="startrotor()"></td>
</tr>
<tr>
<td colspan="5">
<img src="pic1.jpg" name="animation" width="165" height="185" onload="startrotor()"><br>
<input type="button" onclick="stopRotor();" value="stop">
</td>
</table>
</body>
</html>

Wie schon gesagt funktioniert der Bildwechsel ohne Probleme aber wenn ich mit der Mouse auf eine Zahl gehe ändert sich zwar das Bild aber der Bildwechsel wird nicht angehalten im Gegenteil er wird sogar schneller.

Ich gehe mal davon aus das die Stop Funktion nicht ausgeführt wird und das Bildwechsel Script ein zweites mal gestartet wird.
Nun ist aber die Frage warum das Script nicht anhält.
Zum testen habe ich extra ein Button eingeführt und damit funktioniert das anhalten aber warum geht das mit dem onMouseover Effect nicht?

Ich hoffe jemadn kann mir helfen.

thx
 
rotor mit 0 initialisiert, dann geprüft ob rotor wirklich 0 ist, bevor setTImeout aufgerufen wird, ansonnsten nicht aufrufen.
beim stopRotor einfach auf 0 setzten. dadurch sind wir sicher, dass nur ein timer läuft
setTimeout gegen setInterval getauscht - tata

Code: 
<html>
<head>

<script language="JavaScript">

bildername = "pic";
bilderanzahl = 5;

verzoegerung = 2000;
bildNummer = 2;

bilder= new Array();
rotor = 0;

bilder[1] = new Image();
bilder[1].src = "pic1.jpg";
bilder[2] = new Image();
bilder[2].src = "pic2.jpg";
bilder[3] = new Image();
bilder[3].src = "pic3.jpg";
bilder[4] = new Image();
bilder[4].src = "pic4.jpg";
bilder[5] = new Image();
bilder[5].src = "pic5.jpg";

function nextpic() {
document.animation.src = bilder[bildNummer].src;
bildNummer++;
if (bildNummer > bilderanzahl) bildNummer = 1;
}


function changepic(nr) {
if(nr != 0)
{
stopRotor();
document.animation.src = bilder[nr].src;
}
}

function stopRotor() {
window.clearInterval (rotor);
rotor = 0;
}

function startrotor() {
if( rotor  == 0 )
    rotor=setInterval ('nextpic()', verzoegerung);
}


</script>
</head>
<body link="black" vlink="black" alink="black">
<table border="1">
<tr>
<td><img src="num1.jpg" name="num1" onmouseover="changepic(1)" onmouseout="startrotor()"></td>
<td><img src="num2.jpg" name="num2" onmouseover="changepic(2)" onmouseout="startrotor()"></td>
<td><img src="num3.jpg" name="num3" onmouseover="changepic(3)" onmouseout="startrotor()"></td>
<td><img src="num4.jpg" name="num4" onmouseover="changepic(4)" onmouseout="startrotor()"></td>
<td><img src="num5.jpg" name="num5" onmouseover="changepic(5)" onmouseout="startrotor()"></td>
</tr>
<tr>
<td colspan="5">
<img src="pic1.jpg" name="animation" width="165" height="185" onload="startrotor()"><br>
</td>
</table>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück