我已经尝试了几件事,但到目前为止还没有运气.
我正在寻找的是一种让我的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)
现在我现在有了背景图片.
期待着建议.