Veröffentlicht 31. Mai 201015 j Hallo liebe Fachinformatiker. Ich bin dabei, eine Slideshow zu erstellen. Später müssen dort neben Bildern aber auch Videos erscheinen. Um das Ganze also nicht auszubremsen möchte ich nur mit immer 2 gleichzeitigen embed - Tags arbeiten. Eins liegt vor dem anderen. Das vordere wird aus dem Bildschirm geschoben und danach per z-index hinter das hintere gesetzt, das wiederholt sich dann. Vom Prinzip her funktioniert das Ganze auch schonmal. Aber das Bild, das mit der Div-Box wegbewegt wird, flackert. Nur der erste Slide ist ok. Ich könnte mir vorstellen, dass es am Austauschen des z-index liegt. Habt ihr eine Idee oder einen Vorschlag? hier der code: <html> <head> <style type="text/css"> .main { position:absolute; top:0px; left:0px; height:768px; width:1280px; border:1px solid black; overflow:hidden; } .bild { position:absolute; top:0px; left:0px; width:1280px; height:768px; } </style> <script type="text/javascript"> var breite = 1280; var vorne = 1 var hinten = 0 function start() { aendern(0) reihe() window.setTimeout("start()", 10000); } function reihe() { if ( document.getElementById("div"+vorne).style.zIndex == "1" ) { document.getElementById("div"+vorne).style.zIndex = "10" document.getElementById("div"+vorne).firstChild.style.zIndex = "10" document.getElementById("div"+hinten).style.zIndex = "1" document.getElementById("div"+hinten).firstChild.style.zIndex = "1" } else { document.getElementById("div"+vorne).style.zIndex = "1" document.getElementById("div"+vorne).firstChild.style.zIndex = "1" document.getElementById("div"+hinten).style.zIndex = "10" document.getElementById("div"+hinten).firstChild.style.zIndex = "10" } if(vorne == 1) { vorne=0 hinten=1 } else { vorne=1 hinten=0 } document.getElementById("div"+hinten).style.marginLeft = "0px" } function aendern(x_shift) { var x_shift_max = 1280 document.getElementById("div"+vorne).style.marginLeft = "-"+x_shift+"px" if(x_shift<=x_shift_max) { x_shift+=50 if (x_shift>x_shift_max) x_shift = x_shift_max window.setTimeout("aendern("+x_shift+")",100) } } </script> </head> <body onload ="start()"> <div class="main" id="div0" style="z-index:1"><embed src="1.jpg" class="bild" id="bild1"></embed></div> <div class="main" id="div1" style="z-index:10"><embed src="2.jpg" class="bild" id="bild2"></embed></div> </body> </html>
1. Juni 201015 j Dein Fehler liegt in einer falschen Zuweisung in der aendern-Funktion: function aendern(x_shift) { var x_shift_max = 1280; document.getElementById("div"+vorne).style.marginLeft = "-"+x_shift+"px"; if(x_shift<=x_shift_max) { x_shift+=50; if (x_shift>x_shift_max) [B]x_shift_max = x_shift[/B]; window.setTimeout("aendern("+x_shift+")",100); } } Und du solltest dir unbedingt angewöhnen hinter jeder Anweisung ein Semikolon zu setzen!
1. Juni 201015 j Autor function aendern(x_shift) { var x_shift_max = 1280; document.getElementById("div"+vorne).style.marginLeft = "-"+x_shift+"px"; if(x_shift<=x_shift_max) { x_shift+=50; if (x_shift>x_shift_max) x_shift_max = x_shift; window.setTimeout("aendern("+x_shift+")",100); } } Danke für den Vorschlag, aber.... was soll das bringen, wenn ich den Maximal-wert, also den Wert, an dem die Schleife abgebrochen werden soll, verändere?? x_shift wird erhöht, bis er x_shift_max erreicht. Das war schon so gewollt. Ausserdem war das ein "Relikt", ich hatte vorher nicht den negativen margin-wert benutzt und das Bild nach links rausgeschoben, sondern den width-wert verkleinert... und da war der "max"-wert = 0 und der x_shift wurde verkleinert. da er aber im letzten Schritt einen negativen Wert erreichte, hab ich ihn dann gleich 0 (max) gesetzt. Egal. Es lag jedenfalls nicht daran, ich habe den Fehler nun gefunden: Es war diese Stelle: function start() { aendern(0) reihe() window.setTimeout("start()", 10000); } während aendern() ausgeführt wurde, ist das Javascript wohl weitergelaufen und hat zugleich reihe() durchgeführt. Ich habe nun den Funktionsaufruf reihe() in die Funktion aendern integriert, sie wird aufgerufen, sobald der max-wert erreicht wird. Nun flackert es ncith mehr. Semikola sind in Javascript nicht nötig, wenn man strikt einzeilig arbeitet. Den Code habe ich von meinem Chef übernommen und wollte den nicht unbedingt in der Hinsicht ändern. Ich selber benutze Semikola eigentlich schon aus Gewohnheit wegen PHP... Also es flackert nicht mehr, allerdings drängen sich nun Filme in den Vordergrund, sobald einer "hinter" ein aktuelles Bild gesetzt wird. Filme scheinen unabhängig von z-index-styles oder Erstellungs-Reihenfolge immer im Vordergrund zu sein. Ich habe noch keine Ahnung, wie ich das lösen soll.
2. Juni 201015 j das gleiche passiert auch wenn hinter dem div ein input liegt und du das grad im focus hast.. dann leuchtet der zeiger durch das div durch... wenn ich mich recht erinnere haben wir das immer damit geloest, dass wir einen iframe hinter das div gelegt hatten, kann es aber grad nicht mehr 100% sagen, weils schon eine weile her ist. Ted
2. Juni 201015 j So, ich hab das was ich vorgeschlagen habe, also die Zeile: if (x_shift>x_shift_max) x_shift_max = x_shift; getestet und sie funktioniert einwandfrei. Jedoch geht das was ursprünglich im Code war, also if (x_shift>x_shift_max) x_shift = x_shift_max; nicht. Du ist nicht nötig reihe() in aendern() aufzurufen.
2. Juni 201015 j Autor Erstmal danke für die ganzen Antworten @Arcsinh: Im Grunde kannst du die Zeile auch komplett weglassen. Wie gesagt ist die eigentlich nur ein Relikt, damit kein negativer wert entsteht.Beim Raussliden per marginLeft isses ja egal ob die nun ein paar Pixl weiter rausrutscht Also die Zeile ist eigentlich total überflüssig, man muss dann aber in der if-Bedingung das = rausnehmen... Also Danke euch für die Tips. Es läuft ja nun. @Ted: Du meinst wegen des Filmes? Also ein div mit einem Film, darüber eni iframe, darüber dann ein Div mit einem Bild darin, und dann kommt der Film nicht mehr durch? Wäre ja toll, muss ich mal testen. Im Netz hab ich nur Lösungen mit Flash-Filmen gefunden, wo es geht, die hinter einem HTML zu "verstecken". Achso, nur als Tip. Die Seiten mit diesem Code werden ausschließlich auf Firefox laufen. evtl. Kompatibilitäten mit anderen Browsern sind also völlig Egal. Auf den Endgeräten läuft nur Firefox.
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.