✔ setInterval will nicht so wie ich will

X

XoR_1337

Mitglied
Guten Abend allerseits.
Ich quäle mich schon seit geraumer Zeit mit einem gewissen Problem, bei dem mir google auch nicht wirklich weiterhelfen konnte.
Ich versuche mittels JS das Bild bzw. den Pfad zu dem Bild eines HTML-Bildelements periodisch zu ändern (also ein einfach gehaltenes Slideboard).

HTML-Datei:
HTML: 
<html>
<head>
	<script type="text/javascript" src="Init.js"></script>
</head>
<body onload="Init();">
	<img src="strand1.jpg" height="200px" width="200px" name="Slidebild">
</body>
</html>


JS-Datei (Init.js):
Code: 
function Init()
{
	//Variablen für Slide
	var SlideBilder = new Array("strand1.jpg", "strand2.jpg", "strand3.jpg");
	var counter = 1;
	
	//Aufruf von SlideFunktion
	var meinInterval = setInterval(counter = change(SlideBilder, counter), 3000);
	
}

//SlideFunktion für den Bilderwechsel	
function change(bild, counter)
{
	document.images["Slidebild"].src = bild[counter];
	counter++;
	
	if(counter == bild.length+1)
	{
		counter = 0;
	}
	
	return counter;
}

Wenn ich es so wie obenstehend ausführe, wird das Bild einmal gewechselt, das wars aber auch schon. Daraus schliese ich, dass das setInterval nicht so ganz funktioniert.
Nach einigem Suchen bei google is mir aufgefallen, dass der Code den setInterval jedesmal ausführen soll in Anführungszeichen steht:

Code: 
var meinInterval = setInterval("counter = change(SlideBilder, counter)", 3000);

Doch nun führt er es überhaupt nicht mehr aus, sprich er kommt erst gar nicht in die Funktion "change". Habe es auch schon mit einfachen Anführungszeichen versucht, doch das Ergebnis bleibt das Selbe.
Hoffe mein Fehler ist nicht zu dämlich :)

MFG XoR_1337
 
Hi,

es ist auch möglich, eine anonyme Funktion zu verwenden. Weiterhin kannst du die change-Funktion in der Init-Routine kapseln. Damit kannst du dir die Übergabe der counter-Variable schenken.
Code: 
<html>
<head>
<script type="text/javascript">
  <!--
function Init(){
  //Variablen für Slide
  var SlideBilder = new Array("bild2.jpg", "bild3.jpg", "bild4.jpg"),
      counter = 1;

  //Aufruf von SlideFunktion
  meinInterval = setInterval(function(){
    change(SlideBilder);
  }, 3000);

  //SlideFunktion für den Bilderwechsel
  function change(bild){
    document.images["Slidebild"].src = bild[counter];
    counter++;

    if(counter == bild.length){
      counter = 0;
    }
  }
}
 //-->
</script>
</head>
<body onload="Init();">
  <img src="bild1.jpg" height="200px" width="200px" name="Slidebild">
</body>
</html>
Ciao
Quaese
 
Ahjo, danke dir!
Warum ich da eine anonyme Funktion noch brauche und es ohne nicht funktioniert, ist mir allerdings noch unklar. Habe das Gefühlt dass JS manchmal komiche Sachen macht^^
 
Hallo!

Ich habe das Ganze auch auf meiner Seite eingebaut, und einmal funktioniert es super. Allerdings habe ich zwei divs, in denen verschiedene Bilder wechseln sollen, es funktioniert aber immer nur eines. Was muss ich ändern, damit beide laufen?
Code: 
<head>
<script type="text/javascript" id="picture">
  <!--
function Init(){
  //Variablen für Slide
  var SlideBilder = new Array("http://www.tutorials.de/images/Wechselbilder/image_2.jpg", "http://www.tutorials.de/images/Wechselbilder/image_3.jpg", "http://www.tutorials.de/images/Wechselbilder/image_4.jpg"),
      counter = 1;
 
  //Aufruf von SlideFunktion
  meinInterval = setInterval(function(){
    change(SlideBilder);
  }, 3000);
 
  //SlideFunktion für den Bilderwechsel
  function change(bild){
    document.images["Slidebild"].src = bild[counter];
    counter++;
 
    if(counter == bild.length){
      counter = 0;
    }
  }
}
 //-->
</script>

<script type="text/javascript" id="picture2">
  <!--
function Init(){
  //Variablen für Slide
  var SlideBilder2 = new Array("http://www.tutorials.de/images/Wechselbilder/image-6.jpg", "http://www.tutorials.de/images/Wechselbilder/image-7.jpg", "http://www.tutorials.de/images/Wechselbilder/image-8.jpg"),
      counter = 1;
 
  //Aufruf von SlideFunktion
  meinInterval = setInterval(function(){
    change(SlideBilder2);
  }, 3000);
 
  //SlideFunktion für den Bilderwechsel
  function change(bild){
    document.images["Slidebild2"].src = bild[counter];
    counter++;
 
    if(counter == bild.length){
      counter = 0;
    }
  }
}
 //-->
</script>
</head>

<body onload="Init();">

<div id="picture">
<img src="http://www.tutorials.de/images/Wechselbilder/image_1.jpg" height="170px" width="170px" name="Slidebild" />
</div>

<div id="picture2">
<img src="http://www.tutorials.de/images/Wechselbilder/image-5.jpg" height="170px" width="170px" name="Slidebild2" />
</div>

</body>

Es wäre klasse, wenn mir jemand weiterhelfen könnte! Vielen Dank schon im Voraus!

Kerstin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück