Question

我正在寻找的是一种让我的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]);
});

我的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%;
}

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

Answer 1

对您的代码做了一些修改

DEMO：http://jsfiddle.net/p77KW/

var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);

最大的变化（如其他评论中所述）是你必须使用撇号**'，而不是那些时髦的打开和关闭单引号，并且你的数组不正确。

通过这些修正，我简化了一些事情：

增量current 然后取模数（我知道这基本上就是你所做的，但调试;)要容易多少）
直接定位background-image
使用setInterval()代替对setTimeout

Answer 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<header></header>
</body>
</html>

Answer 3

你可以用HTML / CSS实现同样的技术，只需1.将图像置于＆＃34; img＆＃34; HTML中的标记被＆＃34; div包装＆＃34;包围并将其设置为position：relative和div wrapper img＆＃39; s到position：absolute。对于全宽/全高，您可以使用百分比或可能＆＃34;背景大小：覆盖＆＃34; （没有检查）然后调用CSS动画来动态更改图像。

或2.您可以将多个图像添加到CSS中用逗号分隔的背景中，应用background-size：cover并再次使用CSS动画来更改背景。

这里有一个example和一个Mozilla CSS3 Animation Documentation

Answer 4

您无法使用‘个字符分隔JavaScript字符串。您必须使用"或'。

Answer 5

一定是迟到但可能对另一个有所帮助。在某些情况下，为了达到这个目标，我更喜欢使用一个名为tcycle的jquery插件，它只有几行代码，只支持淡入淡出过渡，但即使是大图像也可以顺利运行。

使用tcycle设置幻灯片很容易，甚至可以使用声明性标记来完成，例如

<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>

诀窍可能是使用css z-index：-1表示容器div并将宽度和高度设置为100％

下载和检查其他示例的主页是Malsup jQuery plugins

动态更改CSS背景图像

5 个答案: