How to use setInterval to change background-image?

[Logic Ali]

function switchImage() 
{
  var currentIndex = 1;
  var totalIndex = 3;
  
  function f()
  {
    $(".content").css('background-image', 'url("images/'+currentIndex+'.png")');

    if (++currentIndex > totalIndex) 
    {
       currentIndex = 1;
    }
  }

  setInterval( f, 3000 );
}

function windowOnload()  /* presumably this is called by an onload handler */
{
   switchImage();
}

[LearningCoder]

Originally Posted by krillezzz

I just thought i solved it...i had these two global variables local instead.

function switchImage() 
{
	var currentIndex = 1;
	var totalIndex = 3;
	currentIndex++;
	$(".content").css('background-image', 'url("images/'+currentIndex+'.png")');
	if (currentIndex == totalIndex) 
	{
		currentIndex = 1;
	}
}

function windowOnload() 
{
	setInterval("switchImage()", 3000);
}

When i load my webpage it switches to from the first to the second image...but there it stops

It is stopping at the second image because the variables are now local, so everytime that function is called you are setting currentIndex back to 1 so it only ever increments to 2.

Regards,

LC.

[krillezzz]

Originally Posted by blaze4218

is it because you forgot the kontor-?
again:

setInterval("switchImage()", 3000);

should read

setInterval( switchImage , 3000 );

I'm sorry, I forgot to say that I changed the name of images to 1, 2 and 3.png

Originally Posted by Logic Ali

function switchImage() 
{
  var currentIndex = 1;
  var totalIndex = 3;
  
  function f()
  {
    $(".content").css('background-image', 'url("images/'+currentIndex+'.png")');

    if (++currentIndex > totalIndex) 
    {
       currentIndex = 1;
    }
  }

  setInterval( f, 3000 );
}

function windowOnload()  /* presumably this is called by an onload handler */
{
   switchImage();
}

But when I had those variables as global the function didn't work at all, when they are local it switches to picture number 2. So i thought it was one step closer :P

[krillezzz]

I solved to problem (thanks to you guys), but there was a problem that i didn't expect.

our teacher said that in the top of the javascript-file we should have the line

jQuery.support.cors = true;

to make it support jQuery, i don't know why but this line made all my global variables f*cked up :P so they didn't work. I just comment that line away and wops it started to work, anyone know why?

[LearningCoder]

Where exactly have you put that line of code?

Regards,

LC.

[krillezzz]

Originally Posted by LearningCoder

Where exactly have you put that line of code?

Regards,

LC.

In top of the javascript-file