I need to make a css background image fade slideshow. For several reasons, i cannot have a physical div in my html. It's the body with a class called -home- that has a current background. There will be开发者_开发知识库 4 pictures for the slideshow, no more, no less, so that doesn't have to dynamic.
I already have the following jquery:
<script type="text/javascript">
$(document).ready(function() {
var original_image = '#000000 url(images/bg_home.jpg) top center no-repeat';
var second_image = '#000000 url(images/bg_home2.jpg) top center no-repeat';
var third_image = '#000000 url(images/bg_home3.jpg) top center no-repeat';
var fourth_image = '#000000 url(images/bg_home4.jpg) top center no-repeat';
$('.home').click(function() {
$(this).css('background', second_image);
});
});
</script>
So, as you see this is a very simple script that only works if i click the general -home- div. Can anyone help me with transforming this into a simple fade slideshow without any click? It should just start executing the fade slideshow onload.
Thank you very much!
Suggestion:
$(function(){
var images = [
'bg_home.jpg',
'bg_home2.jpg',
'bg_home3.jpg',
'bg_home4.jpg'
],
loop = 0,
$home = $('.home');
(function fader(){
$home
.fadeOut('fast', function(){
$home.css('background', '#000000 url(' + images[loop] + ') top center no-repeat');
$home.fadeIn('fast', function(){
setTimeout(fader, 3000);
});
});
if(loop < images.length)
loop++;
else loop = 0;
})();
});
精彩评论