动态更改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%;
}
现在我现在有背景图像了。
期待建议。
<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>
感谢您复制粘贴我的代码';-)' – gvee
谢谢你们,我现在得到了它的工作,感谢您的全力帮助。还有一件事。我可以得到这个:'var header = $('header');'调用'class'而不是元素。我想申请我的HTML5'
想出了'class'事情,一切似乎都很好,再次感谢您的帮助,非常感谢。 –
做了一些修改代码
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
到目前为止,感谢您的帮助,但没有任何工作。我将我的'script'标签内的代码复制并粘贴到我的页面中。像你所说的那样,还有'背景图像'。尽管如此,我依然没有形象,没有任何意义。 –
@CWDesign你可以试试它与PlaceKitten链接? – gvee
是的,我就像你一样。 –
你只能通过1.将图像由“DIV包装”并将其设置为位置包围的“IMG”在你的HTML标签内达致这与HTML/CSS同样的技术:相对和DIV包装IMG对位置:绝对的。对于全宽/全高,您可以使用百分比或潜在的“背景大小:封面”(未选中),然后调用CSS动画以动态更改图像。
或者2.您可以将多个图像添加到CSS中的背景中,用逗号分隔,应用background-size:cover并再次使用CSS动画更改背景。
下面是一个example也Mozilla的CSS3 Animation Documentation
它必须是晚,但可以帮助一个又一个。 对于某些情况下的这个目标,我更喜欢使用一个名为tcycle的jquery插件,它只有几行代码,并且只支持淡入淡出转换,但即使在大图片的情况下,它也可以顺利运行。
设置具有TCYCLE幻灯片是容易的,甚至可以用声明性标记如
<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>
诀窍可以使用CSS z索引被东德来完成:-1 div容器和设置的宽度和高度下载并检查其他例子,100%
这是一个可怕的想法。它会首先加载所有图像。 –
你的阵列是错误的...有几个逗号丢失.. – gvee
引号字符串是错误的了。 http://jsfiddle.net/4LFnK/ – amsross