How to use setInterval to change background-image?

krillezzz · 09-17-2012, 02:25 PM

Hi, i'm trying to make my homepage switch between 3 different images using setInterval().

This is how far I have come, why doesn't it work? The images is named kontor-1, kontor-2 and kontor-3

Code:

function bildbyte() 
{
	var index = 1;
	var totalCount = 3;

	setInterval(function()
	{
		if (index > totalCount) 
		{
			index = 1;
		}
		$(body).css('background-image', 'url(/images/kontor-' + index++ + '.png)');
	}, 5000);
}

WolfShade · 09-17-2012, 02:38 PM

Put the setInterval after the function.

function bildbyte(){
code
}
setInterval('bildbyte()',5000);

Logic Ali · 09-17-2012, 04:10 PM

Are you actually calling bildbyte() anywhere?

LearningCoder · 09-17-2012, 04:17 PM

This is another example:

Code:

<html>
<body onload="window_onload()">

JS:

Code:

var currentImgNumber = 1;
var numberOfImages = 3;

function switchImage(){
   currentImgNumber++;
   document.imgAdvert.src = 'images/YourImage' + currentImgNumber + '.jpg';
   if(currentImgNumber == numberOfImages){
       currentImgNumber = 0;
   }
}

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

This code changes the image within a div. You could slightly modify this to suit the background images.

Regards,

LC.

LearningCoder · 09-17-2012, 04:35 PM

Maybe changing the function to something like this:

Code:

var currentImgNumber = 1;
var numberOfImages = 3;

function switchImage(){
   currentImgNumber++;
   document.body.style.background = 'url(images/AdvertImage' + currentImgNumber + '.jpg)';
   if(currentImgNumber == numberOfImages){
       currentImgNumber = 0;
   }
}

Set your additional attributes for the image just like you would do in the css like no repeats x+y etc. You can just add to that statement your other declarations.

Regards,

LC.

krillezzz · 09-17-2012, 05:37 PM

Quote:

Originally Posted by LearningCoder

Maybe changing the function to something like this:

Code:

var currentImgNumber = 1;
var numberOfImages = 3;

function switchImage(){
   currentImgNumber++;
   document.body.style.background = 'url(images/AdvertImage' + currentImgNumber + '.jpg)';
   if(currentImgNumber == numberOfImages){
       currentImgNumber = 0;
   }
}

Set your additional attributes for the image just like you would do in the css like no repeats x+y etc. You can just add to that statement your other declarations.

Regards,

LC.

Thanks for all your tips, I've been modifying my code into this:

Code:

var currentIndex = 1;
var totalIndex = 3;

function switchImage() 
{
	currentIndex++;
	document.content.style.background = 'url(images/kontor-' + currentIndex + '.png)';
	if (currentIndex == totalIndex) 
	{
		currentIndex = 1;
	}
}

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

My CSS look like this:

Code:

.content
{
	height: 600px;
	width: auto;
	padding: 0px;
	background-image: url("images/kontor-1.png");
	background-repeat: no-repeat;
	background-position: center;
}

And i run windowOnload() in

Code:

<body onload="windowOnload()">

,
the problem is what i think in the line:

Code:

document.content.style.background = 'url(images/kontor-' + currentIndex + '.png)';

I'm not sure that this make me change this url in the class content in my CSS, because it's still not working

blaze4218 · 09-17-2012, 05:39 PM

Quote:

Originally Posted by WolfShade

Put the setInterval after the function.

function bildbyte(){
code
}
setInterval('bildbyte()',5000);

That should read

Code:

setInterval( bildbyte , 5000 );

And to address

Quote:

why doesn't it work?

I would venture:
-either Logic Ali's reply
-or the $() is expecting a string. ie: $('body')

blaze4218 · 09-17-2012, 05:43 PM

You cannot access a className this way.
If you used an id instead

Code:

#content
{
	height: 600px;
	width: auto;
	padding: 0px;
	background-image: url("images/kontor-1.png");
	background-repeat: no-repeat;
	background-position: center;
}

Code:

document.getElementById('content').style.background = 'url(images/kontor-' + currentIndex + '.png)';

but as long as you are using jQuery, you would't have to switch to an id...

krillezzz · 09-17-2012, 05:46 PM

Quote:

Originally Posted by blaze4218

You cannot access a className this way.
If you used an id instead

Code:

#content
{
	height: 600px;
	width: auto;
	padding: 0px;
	background-image: url("images/kontor-1.png");
	background-repeat: no-repeat;
	background-position: center;
}

Code:

document.getElementById('content').style.background = 'url(images/kontor-' + currentIndex + '.png)';

but as long as you are using jQuery, you would't have to switch to an id...

I'm very new to this like you probably already noticed, but i'm trying to use JQuery, but cant this to work =/

krillezzz · 09-17-2012, 05:50 PM

But it's still not working with

Code:

document.getElementById('content').style.background = 'url(images/kontor-' + currentIndex + '.png)';

Is it because content is a class? I dont really now how to give that class an ID. Because this image as set as an background-image in .content in the CSS, i dont really have any HTML-tags around it.

Code:

<div class="content">
				<ul id="nav">
					<li><a class="anav" href="#">| Home</li>
					<li><a class="anav" href="about.html">| About</li>
					<li><a class="anav" href="#">| Games</li>
					<li><a class="anav" href="#">| Jobs</li>
					<li><a class="anav" href="#">| Valfri</li>
				</ul>
			</div>

blaze4218 · 09-17-2012, 05:51 PM

Code:

<div class="content" id="content">
				<ul id="nav">
					<li><a class="anav" href="#">| Home</li>
					<li><a class="anav" href="about.html">| About</li>
					<li><a class="anav" href="#">| Games</li>
					<li><a class="anav" href="#">| Jobs</li>
					<li><a class="anav" href="#">| Valfri</li>
				</ul>
			</div>

krillezzz · 09-17-2012, 06:06 PM

I found a way now to change the background-image.

Code:

var currentIndex = 1;
var totalIndex = 3;

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

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

The problem is that it's not switching to any picture, it just go blank

krillezzz · 09-17-2012, 06:08 PM

Quote:

Originally Posted by krillezzz

I found a way now to change the background-image.

Code:

var currentIndex = 1;
var totalIndex = 3;

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

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

The problem is that it's not switching to any picture, it just go blank

If i write

Code:

$(".content").css('background-image', 'url("images/2.png")');

instead of

Code:

$(".content").css('background-image', 'url("images/'+currentIndex+'.png")');

then it changes to the right picture, but its not working with '+currentIndex+'

blaze4218 · 09-17-2012, 06:09 PM

is it because you forgot the kontor-?
again:

Code:

setInterval("switchImage()", 3000);

should read

Code:

setInterval( switchImage , 3000 );

krillezzz · 09-17-2012, 06:11 PM

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

Code:

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