To do this, just follow the 3 simple steps below.
1. First, you should have the list of images for your site's background.
2. Set an id for your <body> tag, let say id="body" as stated below.
<html>
<head>
</head>
<body id="body">
</body>
</html>
3. Create a javascript that changes the background-image property of the body tag using jquery and set it in a loop using setTimeout().
<script type="text/javascript">
function carousel_bg(id) {
var bgimgs = [ '1920x625_Sonata_homepage_image.jpg', '1920x625_Equus_homepage_image.jpg', '5_home_hero_1920x625_CF_background.jpg' ]; // add images here..
var img = bgimgs[id];
var cnt = 3; // change this number when adding images..
$('#body').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");
id = id + 1;
if (id==cnt) id = 0;
setTimeout("carousel_bg("+id+")", 10000);
}
$(document).ready(function() {
carousel_bg(0);
});
</script>
You can still add images by adding the image filename on the array "bgimgs" and change the variable "cnt" to add images as part of the loop.. and that's it.
To get the complete code, please see below.
<html>
<head>
<title>Hotshots Carousel Background</title> <script type="text/javascript" src="http://www.pitstopmotors.com.ph/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
function carousel_bg(id) {
var bgimgs = [ '1920x625_Sonata_homepage_image.jpg', '1920x625_Equus_homepage_image.jpg', '5_home_hero_1920x625_CF_background.jpg' ]; // add images here..
var img = bgimgs[id];
var cnt = 3; // change this number when adding images..
$('#body').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");
id = id + 1;
if (id==cnt) id = 0;
setTimeout("carousel_bg("+id+")", 10000);
}
$(document).ready(function() {
carousel_bg(0);
});
</script>
</head>
<body id="body">
</body>
</html>
