✔ DIV - Hintergrund regelmäßig tauschen

N

Na_dine

Mitglied
Hallo,
ich möchte in meine html-Seite einen <Div> einbauen, der in regelmäßigen Zeitabständen (alle 60Sekunden) den Inhalt wechselt!
Der DIV Container heißt Countdown und ist im Body.
Die JS-function count() rufe ich im öffnenden body-tag auf mit onload.

Soweit funktioniert alles bis zur anzeige des ersten Hintergrundbildes.
Nach einer Minute wird dies ausgeblendet und leider nichts mehr angezeigt :-(
Die Schreibweise der Bilder habe ich schon überprüft.
Der Fehler könnte in der ersten else if Schleife ( else if (start <= 169) ) stecken, da hier der Editor den Quelltext nicht mehr schwarz, sondern auf einmal blau anzeigt...

einen Fehler finde ich aber leider nicht und bräuchte deswegen eure Hilfe ....

schon mal vielen Dank für alle Tipps und Anregungen!!
Gruß, Nadine

Code: 
<script type="text/javascript">
var div = document.createElement("div");
    div.setAttribute("id","MainItem");

    	div.style.position="relative";
  	div.style.left="200px";
   	div.style.top="200px";
  	div.style.width="230px";
  	div.style.height="210px";


var start = 180;
var aktiv = setInterval("count()", 1000);

function count()
{
start--;
if(start >= 120)
	{
	document.getElementById("Countdown").appendChild(div);
	div.style.backgroundImage="url(Bild1.jpg)";
	}
 else if (start <= 119)
 	{
	document.getElementById("Countdown").appendChild(div);
	div.style.backgroundImage="url(Bild2.jpg)";
 	}

 else if (start <= 60)
	{
	document.getElementById("Countdown").appendChild(div);
	div.style.backgroundImage="url(Bild3.jpg)";
	}
}
</script>
 
Hi,

du hängst jede Sekunde ein DIV ein und weist diesem ein Hintergrundbild zu.

Viel eleganter wäre es doch, das Element nur einmal anzulegen und einzuhängen. Alle 60 Sekunden muss dann nur noch das Hintergrundbild getauscht werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var arrBilder = new Array("bild1.jpg",
                          "bild2.jpg",
                          "bild3.jpg");


window.onload = function(){
  div = document.createElement("div");
  div.setAttribute("id","MainItem");

  div.style.position="relative";
  div.style.left="200px";
  div.style.top="200px";
  div.style.width="230px";
  div.style.height="210px";

  // Ausgangsbild zuweisen
  div.style.backgroundImage = "url("+arrBilder[0]+")";

  // Bild-DIV einhängen
  document.getElementById("Countdown").appendChild(div);

  // Index-Zähler
  intCount = 1;
  aktiv = setInterval(function(){count();}, 60000);
}

function count(){
  // Neues Hintergrundbild und Zähler inkrementieren
  div.style.backgroundImage = "url("+arrBilder[intCount++]+")";

  // Falls der Zähler den gültigen Bereich verlassen hat -> zurücksetzen
  if(intCount == arrBilder.length)
    intCount = 0;
}

//-->
</script>
</head>
<body>
<div id="Countdown"></div>
<button onclick="window.clearInterval(aktiv);">clear</button>
</body>
</html>

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Ah super danke,
stecke noch in den Kinderschuhen der Javascript, aber dein Beitrag hat mir super weitergeholfen!
Vielen Dank :-)
Nadine
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück