Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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);
    }

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Put the setInterval after the function.

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

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Are you actually calling bildbyte() anywhere?

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.
    Last edited by LearningCoder; 09-17-2012 at 05:30 PM.

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    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

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quote Originally Posted by WolfShade View Post
    Put the setInterval after the function.

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

    Code:
    setInterval( bildbyte , 5000 );
    And to address
    why doesn't it work?
    I would venture:
    -either Logic Ali's reply
    -or the $() is expecting a string. ie: $('body')
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #9
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by blaze4218 View Post
    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 =/

  • #10
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #11
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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>
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #12
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by krillezzz View Post
    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+'

  • #14
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    is it because you forgot the kontor-?
    again:
    Code:
    setInterval("switchImage()", 3000);
    should read
    Code:
    setInterval( switchImage , 3000 );
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #15
    New Coder
    Join Date
    Sep 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •