I'm trying to change the background image of my application dynamically at an interval of 5 seconds from 5 images and then repeat.
Here's my JS code:
<script type="text/javascript">
$(function() {
var body = $('body');
var backgrounds = new Array(
'url(img/bg/bk.jpg)',
'url(img/bg/nb.jpg)',
'url(img/bg/la.jpg)',
'url(img/bg/ts.jpg)',
'url(img/bg/bh.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]);
});
</script>
Here's my CSS:
body {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 40px;
padding-bottom: 40px;
}
But it doesn't work. Even the background is blank-white. The <body> doesn't have any attributes.
Aucun commentaire:
Enregistrer un commentaire