相关疑难解决方法(0)

动态更改CSS背景图像

我已经尝试了几件事,但到目前为止还没有运气.

我正在寻找的是一种让我的HTML标头标签每隔几秒就改变背景图像的方法.任何解决方案都是受欢迎的,只要它不复杂.

我现在有这个代码以及链接到JQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

$(function() {
    var header = $(‘.mainHeader’);
    var backgrounds = new Array(
        ‘url(img/rainbow.jpg)’,
        ‘url(img/chickens_on_grass.jpg)’
        ‘url(img/cattle_on_pasture.jpg)’
        ‘url(img/csa_bundle.jpg)’
    );
    var current = 0;

    function nextBackground() {
        header.css(‘background’,backgrounds[current = ++current % backgrounds.length]);
        setTimeout(nextBackground, 10000);
    }

    setTimeout(nextBackground, 10000);
    header.css(‘background’, backgrounds[0]);
});
Run Code Online (Sandbox Code Playgroud)

我的HTML标题:

<header class="mainHeader"></header>

和CSS:

.mainHeader {
    background: no-repeat center bottom scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 150px;
    padding-top: 2%;
    font-size: 100%;
}
Run Code Online (Sandbox Code Playgroud)

现在我现在有了背景图片.

期待着建议.

html javascript css jquery

10
推荐指数
3
解决办法
5万
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1