1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

switch between background images with delay

Discussion in 'JavaScript' started by Silvester Vella, Nov 29, 2016.

0
  1. #1
    Hi there.. I am trying to change the css background image on the <html> tag.
    What I need exactly is this, switch between 3 background images with a 100 delay, then wait another 5000 delay, and start again, and it will keep going like this.

    Any help please?

    Thanks a lot.
     
    Silvester Vella, Nov 29, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I'd just use javascript to change the class of the element and use sleep() to control the frequency.
     
    sarahk, Nov 29, 2016 IP
  3. Silvester Vella

    Silvester Vella Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    I'm new at javascript.. didn't understand any of that, sorry :/
    I have found this code, and it continuously switches betweed the two backgrounds, is there a way to add a third and then pause before restarting?
    Thanks.

     var rotate = false;
function setbackground(){
  window.setTimeout( "setbackground()", 100);
  newImage = rotate ? 'url(portfolio-back.jpg)' : 'url(portfolio-back2.jpg)';
  rotate = !rotate;
document.body.style.backgroundImage = newImage;
}

setbackground();
    Code (JavaScript):
     
    Silvester Vella, Nov 29, 2016 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    try something like this

    https://jsfiddle.net/bbm5zeuz/

     var rotate = 0;

var sampleImages = [
   'https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/angel.png',
   'https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/anchor.png',
   'https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/arch_linux.png'
]

setBackground();

function setBackground() {
 
   rotate = rotate+1;
 
   if (rotate >= sampleImages.length) {
     rotate = 0;
   }
 
   var testme = document.getElementById('testme');
   testme.style.backgroundImage = "url("+sampleImages[rotate]+")";
 
   setTimeout(setBackground, 800);
}
    Code (markup):
    If you want to fiddle around with the delay then just put them into an array too and use this for the timeout

    setTimeout(setBackground, timeouts[rotate]);
    Code (markup):
     
    sarahk, Nov 29, 2016 IP
  5. Silvester Vella

    Silvester Vella Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    Worked perfectly. Thanks a lot mate :D
     
    Silvester Vella, Nov 30, 2016 IP