Динамическое изменение фонового изображения 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%;
}

Прямо сейчас у меня теперь есть фоновое изображение вообще.

Ответы

Ответ 1

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

Ответ 2

Сделал несколько поправок к вашему коду

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

Ответ 3

Вы можете получить эту же технику с помощью HTML/CSS. Только 1. помещая изображения в тег "img" в HTML, окруженный "оберткой div" и устанавливая его в положение: относительная и обертка div img в позицию: абсолютная, Для полноразмерной/полной высоты вы можете использовать проценты или потенциально "фон-размер: обложка" (не отмечены), а затем вызвать анимацию CSS для динамического изменения изображений.

Или 2. вы можете добавить несколько изображений в фон в CSS, разделенных запятыми, применить обложку background-size: cover и снова использовать анимацию CSS для изменения фона.

Здесь пример, а также Mozilla Документация по анимации CSS3

Ответ 4

Вы не можете разграничить строки JavaScript с символами ‘. Вы должны использовать " или '.

Ответ 5

Это должно быть поздно, но может помочь другому. Для этой цели в некоторых ситуациях я предпочитаю использовать плагин jquery с именем tcycle, который имеет всего несколько строк кода и поддерживает только переход на постепенный переход, но он работает плавно даже с большими изображениями.

Настройка слайд-шоу с tcycle проста и даже может быть выполнена с помощью декларативной разметки, например

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

Трюк может быть donde с использованием css z-index: -1 для div контейнера и установки ширины и высоты до 100%

Домашняя страница для загрузки и проверки других примеров Плагины Malsup jQuery