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

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

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

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

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

Кто-нибудь знает хороший способ сделать это с помощью jquery?

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

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

javascript jquery background-image slideshow
person Tom    schedule 04.03.2011    source источник

Ответы (5)


arrow_upward
4
arrow_downward

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

person Gareth    schedule 04.03.2011

arrow_upward
1
arrow_downward

Как насчет добавления списка разбивки на страницы для большого пальца, чтобы фоновое изображение обновлялось по щелчку, а затем, через секунду или две, оно начинает автоматически появляться и исчезать со следующим 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/.

person Taty    schedule 02.12.2011

arrow_upward
0
arrow_downward

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

   fadeOut()

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

   fadeIn()

что-то типа...

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

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

person Brandon Frohbieter    schedule 04.03.2011
comment
Это не меняет фоновое изображение div. - person Tom; 04.03.2011
comment
Спасибо, невнимательно прочитал вопрос. Можете ли вы создать еще один div, расположенный абсолютно ниже? - person Brandon Frohbieter; 04.03.2011

arrow_upward
0
arrow_downward

Вы можете создать абсолютное позиционирование и с помощью плагина ползунка изменить изображения, содержащиеся в 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();
person Jepser Bernardino    schedule 04.03.2011

arrow_upward
0
arrow_downward

Вот решение, которое не только решит вашу проблему, но и решит некоторые другие проблемы. Создайте еще один 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.

person Joshua    schedule 04.03.2011