kleiner hobbit: komisches verhalten bei Bildwechsel

Hallo liebes Forengemeinschaft,

ich habe mir mit Javascript ein kleines Skript gebastelt. Problem ist, dass es ein komsiches verhalten hat. Springt teilweise ein paar Bilder über. Das Normale verhalten sollte ja sein, dass die Bilder alle 3sek. gewechselt werden sollen, hier nun das Skript

<html>  
<head>  
<style type="text/css">  
.yazibir{width:385px; padding:15px 0px 4px 5px; font:12pt Arial; font-weight:bold; border-bottom:1px solid #FF0000;}  
  
.tablo1{padding:6px 0px 0px 0px;}  
.tablo2{padding:6px 0px 0px 0px; font:9pt Arial;}  
.tablo3{border-bottom:2px solid #E5E5E5;}  
.tablo4{padding:10px 0px 10px 0px;}  
.tablo5{padding:10px 0px 10px 0px; border-bottom:1px dotted #000000;}  
.tablo6 a{font:9pt Arial; font-weight:bold; color:#000000; text-decoration:none;}  
.tablo6 a:hover{color:#990000; text-decoration:underline;}  
.tablo6 a:active{color:#B2B2B2; text-decoration:none;}  
</style>  
<script type="text/javascript">  
function bild1()  
{  
var e = document.getElementById("ortaresim");  
e.src = document.getElementById("img1").src;  
window.setInterval("bild2()", 3000);  
}  
  
function bild2()  
{  
var e = document.getElementById("ortaresim");  
e.src = document.getElementById("img2").src;  
window.setInterval("bild3()", 3000);  
}  
  
function bild3()  
{  
var e = document.getElementById("ortaresim");  
e.src = document.getElementById("img3").src;  
window.setInterval("bild4()", 3000);  
}  
  
function bild4()  
{  
var e = document.getElementById("ortaresim");  
e.src = document.getElementById("img4").src;  
window.setInterval("bild1()", 3000);  
}  
</script>  
</head>  
<body onload="bild1()">  
<div id="ortaresimbir">  
<div class="yazibir">Hier kommen die "Überschriften" zu den Bildern</div>  
<table width="380px" align="center" cellspacing="0" cellpadding="0">  
<tr>  
<td colspan="7" align="center" valign="middle" class="tablo1"><img id="ortaresim" width="379" height="285" src="" alt="" /></td>  
</tr>  
<tr>  
<td colspan="7" align="left" valign="top" class="tablo2">Hier kommen die zwei- dreizeiler zu den Bildern.  
Hier kommen die zwei- dreizeiler zu den Bildern.  
Hier kommen die zwei- dreizeiler zu den Bildern.  
Hier kommen die zwei- dreizeiler zu den Bildern.</td>  
</tr>  
<tr>  
<td colspan="7" align="center" valign="middle" class="tablo3">&nbsp;</td>  
</tr>  
<tr>  
<td width="85px" align="center" valign="middle" class="tablo4"><img id="img1" width="84" height="64" src="foto2.jpg" alt="" /></td>  
<td width="13px" align="center" valign="middle" class="tablo4">&nbsp;</td>  
<td width="85px" align="center" valign="middle" class="tablo4"><img id="img2" width="84" height="64" src="foto3.jpg" alt="" /></td>  
<td width="13px" align="center" valign="middle" class="tablo4">&nbsp;</td>  
<td width="85px" align="center" valign="middle" class="tablo4"><img id="img3" width="84" height="64" src="foto4.jpg" alt="" /></td>  
<td width="14px" align="center" valign="middle" class="tablo4">&nbsp;</td>  
<td width="85px" align="center" valign="middle" class="tablo4"><img id="img4" width="84" height="64" src="foto5.jpg" alt="" /></td>  
</tr>  
</table>  
</div>  
</body>  
</html>

LG
kleiner hobbit

  1. Hallo,

    sieh dir noch einmal an, was setInterval genau macht und wo der Unterschied zu setTimeout ist. Ich vermute, du benötigst letzteres.

    Gruß, Jürgen

    1. Hallo,

      sieh dir noch einmal an, was setInterval genau macht und wo der Unterschied zu setTimeout ist. Ich vermute, du benötigst letzteres.

      Gruß, Jürgen

      Erstens das, was Jürgen sagt und zweitens könntest Du auch noch Probleme mit der Dom-Verfügbarkeit Deiner Elemente und der Bilder kriegen. Die erste Antwort solltest Du allerdings auch beherzigen, der Quellcode ist gruselig, sorry.

    2. Hallo Jürgen,

      danke das mit dem setTimeout hat geklappt.

      Vielen Dank.

      Gruß
      kleiner hobbit

  2. Mahlzeit kleiner hobbit,

    .tablo1{padding:6px 0px 0px 0px;}
    .tablo2{padding:6px 0px 0px 0px; font:9pt Arial;}
    .tablo3{border-bottom:2px solid #E5E5E5;}
    .tablo4{padding:10px 0px 10px 0px;}
    .tablo5{padding:10px 0px 10px 0px; border-bottom:1px dotted #000000;}
    .tablo6 a{font:9pt Arial; font-weight:bold; color:#000000; text-decoration:none;}
    .tablo6 a:hover{color:#990000; text-decoration:underline;}
    .tablo6 a:active{color:#B2B2B2; text-decoration:none;}

    Klassen sollten sinnvoll benannt sein. Der Begriff "tablo" ist mir zwar nicht unbedingt bekannt, die durchgehende Nummerierung lässt aber vermuten, dass selbst ein entsprechender Muttersprachler mit den Bezeichnungn nicht viel anfangen kann.

    function bild1()

    function bild2()

    function bild3()

    function bild4()

    http://de.selfhtml.org/javascript/objekte/array.htm@title=Arrays und http://de.selfhtml.org/javascript/sprache/funktionen.htm@title=Funktionsparameter sind Dir aber schon ein Begriff, oder?

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|