jobo: mini "slideshow" optimieren

Beitrag lesen

SELF-Forum

mini "slideshow" optimieren

jobo
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte die Möglichkeit herstellen, divs in Zeitintervallen auszutauschen.

Mein Ansatz für ein Div:

Surround-Div eine Id-Verpassen, die darin enhaltenen Divs per css absolut positionieren (so dass sie übereinander liegen), per getElementsByTagName erfassen und durch die Änderung des z-indexes abwechselnd anzeigen.

html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>slideshow</title>  
<script type='text/javascript' src='slideshow.js'></script>  
<link href="slideshow.css" rel="stylesheet" type="text/css" title="styles" media="all" />  
</head>  
<body>  
<div id="layer1">  
	<div>  
		sometext  
	</div>  
	<div>  
		2. text  
	</div>  
	<div>  
		3. text  
	</div>  
</div>  
</body>  
</html>

css:

  
#layer1 div {  
	border: 1px solid red;  
	position:absolute;  
	width:300px;  
	height:300px;  
	z-index:1;  
	background-color:#fff;  
}

js:

  
changeTime = 1000;  
window.onload = function () {  
	layer1 = document.getElementById("layer1");  
	divsInLayer1 = layer1.getElementsByTagName("div");  
	setTimeout("changeZindexLayer1()" , changeTime);  
}  
function changeZindexLayer1() {  
		if (!window["count"])  {  
			count = 0  
		}  
		if (!window["newZIndex"])  {  
			newZIndex = 10  
		}  
		if (count == divsInLayer1.length)  {  
			count = 0;  
		}	  
		newZIndex += 1;  
		divsInLayer1[count].style.zIndex = newZIndex;  
		count++;  
		setTimeout("changeZindexLayer1()",changeTime);  
}

Insbesondere beim js-code frage ich mich, wie man das eleganter hinbekommt, insbesondere auch in Hinsicht darauf, dass man vielleicht drei "shows" nebeneinander haben möchte, die dann ggf. auch noch zeitversetzt starten.

Also zB. idArray=new Array("layer1","layer2","layer3") durch das man dann läuft und wenn die changeTime bei 3000 liegen würde, würde dann layer1 nach 3000 ms starten, layer2 nach 4000 und layer3 nach 5000. Da könnte man ja dann mit chanteTime/idArray.length hantieren.

Wird das ganze übersichtlicher, wenn man es objektorientiert baut. Die "Dummy-Variante" wäre ja, changeZindexLayer1 einfach zu kopieren und aus der 1 ne 2 zu machen, oder ne 3. Und dann entsprechend in window.onload zu starten.

Gruß

jobo

Beitrag melden
–
Informationen zu den Bewertungsregeln