То, что я ищу, - это способ заставить мой тег заголовка 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%;
}
Прямо сейчас у меня теперь есть фоновое изображение вообще.