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,821
    Likes Received:
    4,539
    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,821
    Likes Received:
    4,539
    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