动态改变 CSS 背景图像答案

【问题标题】：Dynamically Changing CSS Background Image动态改变 CSS 背景图像
【发布时间】：2014-03-12 16:24:29
【问题描述】：

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

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

【问题讨论】：

您的数组有误...缺少几个逗号..
引用字符串也是错误的。 jsfiddle.net/4LFnK

标签： javascript jquery html css

【解决方案1】：

对你的代码做了一些修改

演示：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]);

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

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

递增current 然后取模数（我知道这基本上是你所做的，但调试;)要容易得多）
直接定位background-image
使用setInterval() 而不是双重调用setTimeout

【讨论】：

感谢您迄今为止的帮助，但目前还没有任何效果。我将您的代码复制并粘贴到我的 script 标签内的页面中。也像你说的那样标记background-image。我仍然没有得到任何图像，这没有任何意义。
@CWDesign 你能用 PlaceKitten 链接试试吗？
是的，就像你拥有的一样。
@CWDesign 控制台中有任何错误吗？能给个链接吗？
它似乎有效。您必须等待一段时间，但它确实有效。延迟是由于等待图像加载造成的。加载后，代码似乎运行得很好；同意了吗？

【解决方案2】：

您可以通过 HTML/CSS 实现相同的技术，方法是 1. 将图像放在 HTML 中的“img”标签中，由“div wrapper”包围，并将其设置为 position:relative 和 div wrapper img's to position:absolute .对于全宽/全高，您可以使用百分比或可能的“背景大小：覆盖”（尚未检查），然后调用 CSS 动画来动态更改图像。

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

这是example 和 Mozilla CSS3 Animation Documentation

【讨论】：

这是一个真正的解决方案，仅 HTML/CSS 的解决方案总是比添加 JavaScript 更可取！谢谢。
你能扩展#2，什么。 css 是否可以实际旋转/更改堆叠的背景图像？

【解决方案3】：

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

【讨论】：

谢谢大家，我现在可以正常工作了，谢谢你们的帮助。不过还有一件事。我可以得到这个：var header = $('header'); 调用 class 而不是元素。我想申请我的 HTML5 <header class="mainheader">?
找出class 的东西，一切似乎都很好，再次感谢您的帮助，非常感谢。
@CWDesign 你能不能更改接受的答案，因为这家伙似乎复制/粘贴了下面用户的答案？
如何在背景变化时实现平滑过渡？
@RommelParas 我将创建背景图像并将其设置为具有 z-index: -1 的 body 的直接子代，并在更改新容器的背景图像时使用不透明度。

【解决方案4】：

您不能使用 ‘ 字符分隔 JavaScript 字符串。您必须使用" 或'。

【讨论】：

@daekano 我希望你在开玩笑。
@rvighne 我当然是 :P 根据我的经验，你很少在 Word 之外的任何地方看到这种引用。

【解决方案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

【讨论】：

这是个糟糕的主意。它会首先加载所有图像。