Меняйте фоновое изображение div с эффектом затухания каждые 10 секунд с помощью jquery

Я хотел бы создать слайд-шоу в области заголовка моей страницы. Он должен менять фоновое изображение каждые 10 секунд с приятным эффектом затухания. И поскольку я уже использую jQuery для других вещей, я хотел бы использовать его и для этого.

Итак, моя разметка просто:

<div id="header">
    <!--other stuff here...-->
</div>

И мой CSS на данный момент:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

Итак, теперь я хочу, чтобы через 10 секунд он изменился на

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

с приятным эффектом медленного затухания.


jquery background-image fade
person Gogogo    schedule 31.03.2011    source источник

Ответы (3)


arrow_upward
14
arrow_downward

Я ответил на аналогичный вопрос в Как заполнить браузер окно с вращающимся фоновым изображением?. Вы можете затемнить цвета фона, но не фоновые изображения. Вы должны иметь свои изображения в тегах <img> и скрывать их по умолчанию display:none;. Назначьте своим изображениям position:absolute и z-index:-1, чтобы ваши изображения действовали как фоновые изображения и находились позади всего остального.

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

Проверьте рабочий пример на http://jsfiddle.net/ewsQ7/5/.

person Hussein    schedule 31.03.2011
comment
Вот более надежная версия. Он будет продолжать циклически переходить от одного изображения к другому: jsfiddle.net/jtbowden/hYEzV - person Jeff B; 01.04.2011
comment
Отлично, есть много способов улучшить и дополнить это. Кстати, в вашем примере вы можете просто сделать $(#container img).first().appendTo('#container').fadeIn(5000).fadeOut(5000); вместо того, чтобы дважды вызывать контейнер. - person Hussein; 01.04.2011
comment
Нет, потому что при втором вызове порядок DOM изменился. Я затухаю первое изображение, перемещая его в конец контейнера, а затем одновременно затухаю второе изображение (которое теперь является первым). Это дает эффект перекрестного затухания и позволяет делать паузы между каждым переходом. Но, да, есть много способов сделать это. - person Jeff B; 01.04.2011
comment
Вау, это именно то, что я искал! Большое спасибо, особенно за ваш пример! - person Gogogo; 13.04.2011
comment
@Jeff B. Приветствую скрипача. полностью помог мне с чрезвычайно быстрым макетом клиента. К сожалению, я не могу использовать что-либо абсолютное в своем дизайне, поэтому он никогда не увидит производство, но все равно ура. - person BizNuge; 04.07.2012
comment
@Jeff B: Есть ли способ предотвратить исчезновение элементов внутри того же контейнера div #? Я хочу, чтобы он работал как фоновое изображение, а над ним были другие элементы. благодаря. - person medk; 28.03.2013
comment
4 года спустя... да, вы можете использовать это как фон, если вы разделите элементы страницы. jsfiddle.net/hYEzV/1237 - person Jeff B; 27.04.2017

arrow_upward
13
arrow_downward

Вы можете затемнить фоновое изображение с помощью CSS3, используя переходы.

Ознакомьтесь с ним на странице https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Для вашего использования настройте jQuery для изменения фонового изображения, но примените стиль перехода с помощью CSS. Каждый раз, когда фон меняется, он будет меняться в соответствии со стилем CSS3.

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}
person Robert Waddell    schedule 30.07.2012
comment
Отличный ответ. Но в будущем, пожалуйста, не используйте w3schools в качестве надежного справочника. w3fools.com - person ORyan; 23.04.2014

arrow_upward
0
arrow_downward

Вы не можете затемнить фоновое изображение. Но вы можете затемнить слой над вашим #header со следующим фоновым изображением...

person Thomas Menga    schedule 31.03.2011