0

我使用渐进式 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;
}
4

2 回答 2

0

尝试将背景图像滑出屏幕，更改它并重新滑动。

<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>
于 2013-02-06T19:36:28.417 回答
0

你肯定可以做到，但是当图像改变时不会有任何过渡：

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

这是小提琴：http: //jsfiddle.net/rmR7V/

于 2013-02-06T19:21:53.797 回答