Jquery, changing background image with timer
31,527
You code is correct, you just need to change the backticks. Change ‘
to '
.
Here is a cleaned revision: http://jsfiddle.net/X2NqX/
$(function () {
var body = $('body');
var backgrounds = [
'url(http://static.jsbin.com/images/jsbin_static.png)',
'url(http://static.jsbin.com/images/popout.png)'];
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
});
Author by
Joseph Montecalvo
Updated on August 08, 2020Comments
-
Joseph Montecalvo almost 4 years
I have two background images I am using for this website and I want them to change automatically every 5 seconds. Can someone please look at my jQuery code and tell me what I am doing wrong?
$(function() { var body = $(‘body’); var backgrounds = new Array( ‘url(images/hso-palmtree-background.jpg)’, ‘url(images/hso-boardwalk-background.jpg)’ ); var current = 0; function nextBackground() { body.css( ‘background’, backgrounds[current = ++current % backgrounds.length] ); setTimeout(nextBackground, 5000); } setTimeout(nextBackground, 5000); body.css(‘background’, backgrounds[0]); });
-
drooh almost 6 yearsWorks good, in my case I had to reset the CSS as it overrode the style sheet, example mainImg.css({ 'background':backgrounds[0], 'background-repeat':'repeat-x', 'background-position':'top', 'height':'654px', 'position':'absolute', 'top':'187px', 'width':'100%', 'z-index':'-1', });
-
Harrison Cramer almost 4 yearsHow would one add a css-transition to this? Apologies as this question is pretty old.