CodingForums.com - How to use setInterval to change background-image?

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - How to use setInterval to change background-image? (http://www.codingforums.com/showthread.php?t=273362)

krillezzz

09-17-2012 02:25 PM

How to use setInterval to change background-image?

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 (Post 1270664)

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 (Post 1270632)

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 (Post 1270678)

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 (Post 1270687)

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

All times are GMT +1. The time now is 05:09 AM.

Page 1 of 2

Show 40 post(s) from this thread on one page