How to change background on every 5s
I have image background.jpg as the background. Every 10开发者_运维百科s, how to load a new background background_n.jpg which stays for 100ms and then back to background.jpg and so on?
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;
}
function change_background( new_image_source ) {
var myimage = $( '#myimage' );
myimage.attr( 'src', new_image_source );
setTimeout( function () {
change_background( 'new image source here' );
}, 10000);
}
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/
You can use
setTimeout(function, timeout)(plain Javascript function) to set afunction(which you can define) to run aftertimeoutmillisecondsFor 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 ofsetTimeout()s to set up the repeating action.
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);
// 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.
100msis negligible to notice a change so used1000msfor this example.
HOPE THIS GIVE YOU IDEA.
Use javascript's setTimeout() function
or
jQuery
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
加载中,请稍侯......
精彩评论