nicht angemeldet
mini "slideshow" optimieren
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
-
Lieber jobo,
Insbesondere beim js-code frage ich mich, wie man das eleganter hinbekommt
vielleicht hilft Dir ja mein Artikel weiter? Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
vielleicht hilft Dir ja mein Artikel weiter? Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Bestimmt! (;-).
Gruß
jobo aka Robert aus Berlin
-
Lieber jobo/hotte/hotti/frankx etc.,
Du und Deine ewigen Sockenpuppen... Wer's braucht.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
Lieber jobo/hotte/hotti/frankx etc.,
Du und Deine ewigen Sockenpuppen... Wer's braucht.
Wie kommst Du darauf? Ich war frankx. Wie so einige vor mir hier habe ich dann vor einiger Zeit meinen Nick geändert. Einmal, in jobo. Hat mit Sockenpuppe nix zu tun und mit hotte/hotti schon gar nicht. (s.a.http://forum.de.selfhtml.org/archiv/2009/5/t186933/#m1244037).
"Der Begriff Sockenpuppe (auch: Smurf, Multiaccount, Fake-Account) bezeichnet in der Kommunikation im Internet ein zweites oder weitere/mehrere Benutzerkonten, die angelegt werden, um eigene Argumente innerhalb einer Online-Community mit mehreren „Stimmen“ zu vertreten oder Regeln der Community zu unterlaufen. Die Bezeichnung spielt auf einen Bauchredner an, der sich mit seiner Handpuppe „unterhält“."
Ich habe Dich doch auch mit "Robert" gegrüßt.
Na, wers braucht.
Gruß
jobo
-
Lieber jobo,
nix zu tun und mit hotte/hotti schon gar nicht.
dann entschuldige ich mich hier in aller Form für dieses Missverständnis. ich war tatsächlich der Meinung gewesen, dass diese Nicks alle mit derselben natürlichen Person zu tun hätten. Mein Fehler. Tut mir leid, denn verärgern wollte ich Dich nicht.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
»» nix zu tun und mit hotte/hotti schon gar nicht.
dann entschuldige ich mich hier in aller Form für dieses Missverständnis. ich war tatsächlich der Meinung gewesen, dass diese Nicks alle mit derselben natürlichen Person zu tun hätten. Mein Fehler. Tut mir leid, denn verärgern wollte ich Dich nicht.
Danke für die netten Worte. Mit Sockengepuppe will ich nämlich auch nix zu tun haben. Auch wenn ich hier klar meine Ansichten vertrete, versuche ich insbesondere auch die Forumscharta zu beachten. Da gab es unter frankx ja auch die ein oder andere Ermahnung an andere. Ob das nun so eine schlaue Idee war von frankx nach jobo zu wechseln mag ja dahingestellt bleiben, aber ich habe ja auch die beiden nicht gleichzeitig verwandt, sondern den Namen geswitched. Das wollte ich u.a. auch Dir hier kundtun. Die meisten geht das ja eher weniger was an. Aber auch Vinzenz zB. kannte meinen Klarnamen, da käme ich mir etwas blöd vor meinem Gegenüber, wenn wir uns schon auf eine Art persönlicher kennen, im Unklaren zu lassen.
Gruß
jobo
-
-
Einmal, in jobo. Hat mit Sockenpuppe nix zu tun und mit hotte/hotti schon gar nicht. (s.a.http://forum.de.selfhtml.org/archiv/2009/5/t186933/#m1244037).
Aus Interesse: Was hat dieser Thread mit deinem Namenswechsel zu tun?
Mathias
-
Hallo,
»» Einmal, in jobo. Hat mit Sockenpuppe nix zu tun und mit hotte/hotti schon gar nicht. (s.a.http://forum.de.selfhtml.org/archiv/2009/5/t186933/#m1244037).
Aus Interesse: Was hat dieser Thread mit deinem Namenswechsel zu tun?
War ich wohl in der Zeile verrutscht:
http://forum.de.selfhtml.org/archiv/2009/5/t186933/#m1243895
Gruß
jobo
-
-
-
-
-
-
Hallo,
mit Hilfe von Mathias Schäfers Beitrag zu closures (habs nicht ganz kapiert, aber nachgebaut):
window.onload = function () { layer2 = new divChange("layer2"); setTimeout ("layer2.changeZindex()",1000); layer3 = new divChange("layer3"); setTimeout ("layer3.changeZindex()",2000); layer1 = new divChange("layer1"); setTimeout ("layer1.changeZindex()",3000); } function divChange(masterDivId) { var thisObject = this; var masterDiv = document.getElementById(masterDivId); this.timeInterval = 3000; this.containedDivs = masterDiv.getElementsByTagName("div"); this.count = 0; zIndex = 10; this.changeZindex = function () { if (thisObject.count == thisObject.containedDivs.length) { thisObject.count = 0; } zIndex += 1; thisObject.containedDivs[thisObject.count].style.zIndex = zIndex; thisObject.count++; window.setTimeout(thisObject.changeZindex,thisObject.timeInterval); } }Gruß
jobo