javascript - 使用 jquery 在背景中循环

Question

我使用渐进式 CSS 来设计我的网站背景图片。我找到了一些关于使用 jQuery 循环浏览图像的教程，但我还没有看到任何可以通过 CSS 完成的教程。所有这些都带有 HTML。我怎样才能做到这一点，以便 Jquery 或 Javascript 循环浏览图像而无需为此创建 div。

我的 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

你确定可以做到这一点，但是当图像改变时不会有任何过渡:

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);
});

这是 fiddle :http://jsfiddle.net/rmR7V/