JQuery слайд-шоу с использованием фоновых изображений

Question

У меня есть div, который в настоящее время имеет статическое фоновое изображение.

Мне нужно создать слайд-шоу фоновых изображений для этого div.

Я могу добиться этого, просто установив таймаут, а затем изменив фоновое изображение в CSS, но это не очень элегантно.

В идеале я бы хотел выцветать фоновые изображения, но div содержит другие элементы страницы, поэтому я никак не могу изменить прозрачность.

Кто-нибудь знает хороший способчтобы сделать это, используя jquery ??

Вот некоторый код, который постепенно исчезает, но исчезает и содержимое div тоже.

$("#slideshow").fadeOut(5000, function(){
    $("#slideshow").css('background-image','url(myImage.jpg)');
    $("#slideshow").fadeIn(5000);
});

Answer 1

HTML:

<div class="slideshow"></div>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

jQuery

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

jsfiddle Demo

Answer 2

Как насчет добавления списка разбивки на большие пальцы, чтобы обновлять фоновое изображение по щелчку, а затем, через секунду или две, и оно начинает постепенно исчезать при следующем bg img автоматически?

HTML:

<div class="slideshow">
    <h1>Text</h1>
    <input type="button" value="Hello" />
</div>

<ul>
    <li><a href="#"><img src="http://placehold.it/50x50"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li>
</ul>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

ul {position: absolute; top: 125px; left: 75px;}

li {
    float: left;
    border: 1px solid #000;
    margin: 15px;

}

Javascript:

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

См. Все вместе на http://jsfiddle.net/tatygrassini/R4ZHX/75/.

Answer 3

Вы можете создать позиционированный абсолютно и с помощью плагина слайдера изменить изображения, содержащиеся в div.В противном случае вы должны спрайт фон.Я достиг этого с помощью плагина Jquery Tools .

$(".slidetabs").tabs(".images > div", {

    // enable "cross-fading" effect
    effect: 'fade',
    fadeOutSpeed: "slow",

    // start from the beginning after the last tab
    rotate: true

// use the slideshow plugin. It accepts its own configuration
}).slideshow();

Answer 4

Вот решение, которое не только решает вашу проблему, но также решает и некоторые другие проблемы.Создайте еще один DIV на вашем DOM в качестве наложения и выполняйте функции затухания только на этом DIV.Это будет выглядеть так, как будто контент постепенно исчезает.Этот подход также более эффективен, так как вы используете только один DIV вместо нескольких элементов.Вот пример:

$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
    // Step 1: change your content underneath the hidden div
    // Step 2: hide the overlay
    $('#containeroverlay').fadeOut('normal');
})

Самое главное, этот подход будет работать в IE6-8 без использования псевдонимов шрифтов элементов, которые вы можете иметь в div.

Answer 5

Вместо простого изменения фонового изображения, вы можете сначала вызвать

   fadeOut()

, затем изменить источник, а затем вызвать

   fadeIn()

что-то вроде ...

$('#image').fadeOut(500, function() {
        $(this).attr('src', 'new-image.png')
            .load(function() {
                $(this).fadeIn();
            });
    });

Для использования различных изображений существует несколько решений, но вы можете просто просмотреть список из них.