动态更改CSS背景图像

我已经尝试了几件事情，但迄今没有运气。动态更改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]); 
});

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

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

期待建议。

来源

2014-02-13 CW Design

你的阵列是错误的...有几个逗号丢失.. – gvee

引号字符串是错误的了。 http://jsfiddle.net/4LFnK/ – amsross

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

来源

2014-02-14 04:54:14 sopanha

+10

感谢您复制粘贴我的代码';-)' – gvee

谢谢你们，我现在得到了它的工作，感谢您的全力帮助。还有一件事。我可以得到这个：'var header = $（'header'）;'调用'class'而不是元素。我想申请我的HTML5'

'？ –

想出了'class'事情，一切似乎都很好，再次感谢您的帮助，非常感谢。 –

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

来源

2014-02-13 16:44:40 Quentin

虽然Microsoft Word是最好的代码编辑器！：P – daekano

@daekano我希望你在开玩笑。 – rvighne

@rvighne当然我是：P 根据我的经验，您很少会在Word以外的任何地方看到这些引用。 – daekano

做了一些修改代码

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

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

通过这些修正闪开我简单的几件事情：

增量current然后取模量（我知道这基本上是你做了什么，而是如何更容易的是，调试;)）
目标background-image直接
使用setInterval()而不是双呼叫setTimeout

来源

2014-02-13 16:54:12 gvee

到目前为止，感谢您的帮助，但没有任何工作。我将我的'script'标签内的代码复制并粘贴到我的页面中。像你所说的那样，还有'背景图像'。尽管如此，我依然没有形象，没有任何意义。 –

@CWDesign你可以试试它与PlaceKitten链接？ – gvee

是的，我就像你一样。 –

你只能通过1.将图像由“DIV包装”并将其设置为位置包围的“IMG”在你的HTML标签内达致这与HTML/CSS同样的技术：相对和DIV包装IMG对位置：绝对的。对于全宽/全高，您可以使用百分比或潜在的“背景大小：封面”（未选中），然后调用CSS动画以动态更改图像。

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

下面是一个example也Mozilla的CSS3 Animation Documentation

来源

2014-07-15 17:15:52 truleighsyd

它必须是晚，但可以帮助一个又一个。对于某些情况下的这个目标，我更喜欢使用一个名为tcycle的jquery插件，它只有几行代码，并且只支持淡入淡出转换，但即使在大图片的情况下，它也可以顺利运行。

设置具有TCYCLE幻灯片是容易的，甚至可以用声明性标记如

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

诀窍可以使用CSS z索引被东德来完成：-1 div容器和设置的宽度和高度下载并检查其他例子，100％

首页是Malsup jQuery plugins

来源

2014-11-01 15:59:30

这是一个可怕的想法。它会首先加载所有图像。 –

动态更改CSS背景图像

回答

相关问题