How to change background on every 5s

Question

I have image background.jpg as the background. Every 10s, how to load a new background background_n.jpg which stays for 100ms and then back to background.jpg and so on?

Isn't that the interval where seizures can occur?? – Laurence Burke Jun 22 '11 at 13:57 — Laurence Burke, Jun 22 '11 at 13:57

JMax · Answer 1 · 2019-10-25T13:36:03.513

10

Here is an example (that does not need jQuery to work) :

var rotate = false;
function setbackground(){
  window.setTimeout( "setbackground()", 5000);
  newImage = rotate ? 'url(pict1.jpg)' : 'url(pict2.jpg)';
  rotate = !rotate;
  document.getElementById('change').style.backgroundImage = newImage;
}

edited Oct 25 '19 at 13:36

answered Jun 22 '11 at 13:53

JMax

26,109
12
69
88

score 3 · Accepted Answer · answered Jun 22 '11 at 13:54

3

function change_background( new_image_source ) {

  var myimage = $( '#myimage' );

  myimage.attr( 'src', new_image_source );

  setTimeout( function () {

    change_background( 'new image source here' );

  }, 10000);

}

answered Jun 22 '11 at 13:54

Jose Faeti

12,126
5
38
52

score 3 · Answer 3 · answered Jun 22 '11 at 13:57

Use setInterval and setTimeout

window.setInterval(function(){    
   window.setTimeout(function(){
       $('div').css('background-image','url(background.jpg)');
   },100);
    $('div').css('background-image','url(background_n.jpg)');
},10000);

example: http://jsfiddle.net/niklasvh/M56A6/

score 2 · Answer 4 · edited May 23 '17 at 12:25

You can use setTimeout(function, timeout) (plain Javascript function) to set a function (which you can define) to run after timeout milliseconds

For example (the alert will be displayed after 10 seconds):
```
setTimeout(function () {
     alert('I am running!');
}, 10000);
```

You can change an element's background with:

$(element).css('background-image', 'url(xy.jpg)')

Make sure you preload you background images before using them.
I'd advise against using setInterval() for this (for such small intervals, it could stack up), use a chain of setTimeout()s to set up the repeating action.

score 1 · Answer 5 · answered Jun 22 '11 at 13:57

You can use setInterval to run a function every n seconds, and setTimeout for the code that changes the background image back:

window.setInterval(function(){
  $('body').css('backgroundImage', 'url(background_n.jpg)');
  window.setTimeout(function(){
    $('body').css('backgroundImage', 'url(background.jpg)');
  }, 100);
}, 10 * 1000);

score 1 · Answer 6 · edited Jun 27 '22 at 18:02

// original BG: #95a5a6
// new BG: #1abc9c

var bgTimer = window.setInterval(toggleBG, 10000); // every 10 sec toggleBG

function toggleBG() {
  document.body.style.background = "#1abc9c" // Update BG 
  setTimeout(function() {
    document.body.style.background = "#95a5a6" // return to Original BG after 1000ms
  }, 1000);
}

body {
  background: #95a5a6;
}

<body>
  <h1 id="header">BG change with Time</h1>
</body>

Use url('---') instead of hex colors.

100ms is negligible to notice a change so used 1000ms for this example.

HOPE THIS GIVE YOU IDEA.

score 0 · Answer 7 · answered Jun 22 '11 at 13:51

0

Use javascript's setTimeout() function or jQuery

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

answered Jun 22 '11 at 13:51

Sachin R

11,606
10
35
40

How to change background on every 5s

7 Answers7

Linked