Zum Inhalt springen

bewegte Div's flackern

Hygrom
 Teilen

Empfohlene Beiträge

Hygrom

Hygrom

Geschrieben
Geschrieben

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>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Arcsinh

Arcsinh

Geschrieben
Geschrieben

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!

Link zu diesem Kommentar
Auf anderen Seiten teilen
Hygrom

Hygrom

Geschrieben
  • Autor
Geschrieben 

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
T3D

T3D

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
Arcsinh

Arcsinh

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
Hygrom

Hygrom

Geschrieben
  • Autor
Geschrieben

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.

;)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...