用jQuery在背景中循环

Question

I use progressive CSS to style my website background images. I have found a few tutorials on cycling through images with jQuery, but I have yet to see any that will do it through CSS. All of them are with HTML. How can I do this so that the Jquery or Javascript cycles through images without having to create a div to do so.

My CSS:

html {
background: url('../assets/homepage.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

You sure can do it, but there won't be any transition when the image changes:

html, html.slide1 {
    background: url('../assets/homepage1.jpg') no-repeat center center fixed; 
    /* add vendor prefixes */
    background-size: cover;
}
html.slide2 {
    background-image: url('../assets/homepage2.jpg');
}
html.slide3 {
    background-image: url('../assets/homepage3.jpg');
}

$(function () {
    var classList = ['slide1', 'slide2', 'slide3'],
        $html = $('html'),
        last = classList.length - 1,
        current = 0;

    setInterval(function () {
        current = current == last ? 0 : current + 1;
        $html.prop('class', classList[current]);
    }, 1000);
});

Here's the fiddle: http://jsfiddle.net/rmR7V/

Answer 2

Try sliding the background image off-screen, changing it and sliding it back on.

<style>
html {
background: url('Image1.jpg') no-repeat center center fixed; 
background-size: cover;
}
</style>

<script type="text/javascript">
$(document).ready( function() {
    $('html').animate({
        "background-position": -2048
    },2000, function() {
        $('html').css('background-image',"url('Image2.jpg')");
        $('html').animate({
        "background-position": 0
        },2000);
    });
});
</script>