Optimieren eines Inhaltwechslers mit Javascript

[jobo]

Hallo,

die Aufgabenstellung lautete, in einem Div den Inhalt in regulierbarem Takt auszutauschen.

Wenn mir einer sagen könnte, wo im Javascript oder CSS noch was unschön ist, wäre ich dankbar. Hatte überlegt, das Unsichtbarmachen noch in eine Funktion auszulagern und auch überlegt, wie ich statt zwei setTimeouts in zwei Funktionen das eigentlich in einer machen könnte. Bin auch nicht sicher, ob ich nicht zu viele Variablen hab. Auch soll man nach Crockford ja eigentlich das "new" vermeiden, wenn möglich. Er meint im Vortrag, dass das fast immer möglich sei. Wüsste nicht, wie das hier geht. Auch weiß ich nicht, ob ältere IEs das mitmachen oder eine Browserweiche nötig wäre.

Meine vorläufige getesete Lösung:

  
<style>  
[code lang=css]  
#wechselrahmen {  
	border: 3px solid red;  
	width: 200px;  
	height: 200px;  
	position: relative;  
}  
#wechselrahmen div  {  
	position: absolute;  
	left:0px;  
	top:0px;  
}  

</style>
<div id="wechselrahmen">
<div style="background-color:green">
Div1
<br>
Plenty of Text.
Div1
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div1
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:yellow">
Div2
<br>
Plenty of Text.
Div2
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div2
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:brown">
Div3
<br>
Plenty of Text.
Div3
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div3
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:purple">
Div4
<br>
Plenty of Text.
Div4
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div4
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
</div>
<script>

  
function RobsWechselrahmen () {  
	var secondsBetweenChanges = 2;  
	var milliSecondsBetweenChanges = secondsBetweenChanges * 1000;  
 	var wechselrahmen = document.getElementById("wechselrahmen");  
	var divsInside = wechselrahmen.getElementsByTagName("div");  
	var divsInsideCount = divsInside.length;  
	var actualDiv = 0;  
	var that = this;  
	this.startWechseln = function() {  
		for (var i=0; i < divsInsideCount; i++) {  
			if (i > 0) {  
				divsInside[i].style.visibility = "hidden";  
			}  
		}  
		setTimeout (that.wechseln, milliSecondsBetweenChanges);  
	}  
	this.wechseln = function () {  
		lastDiv = actualDiv;		  
		divsInside[lastDiv].style.visibility = "hidden";  
		if (actualDiv < divsInsideCount - 1)  {  
			actualDiv += 1;  
		} else {  
			actualDiv = 0;  
		}	  
		divsInside[actualDiv].style.visibility = "visible";  
		setTimeout (that.wechseln, milliSecondsBetweenChanges);  
	}  
}  
robsWechselrahmen = new RobsWechselrahmen();  
robsWechselrahmen.startWechseln();  

</script>
[/code]

Gruß

jobo