Фоновое изображение JQuery Slideshow - PullRequest
Новая
       8

Фоновое изображение JQuery Slideshow

0 голосов
/ 30 мая 2011

Я пытаюсь сделать слайд-шоу фонового изображения, используя JQuery. Я нашел интересный пример здесь: Создание JQuery-слайд-шоу фонового изображения

То есть: 

$(function() {
    $("#bannerTable").loadBGImage();
    setInterval('$("#bannerTable").loadBGImage()', 5000);
});

$.fn.loadBGImage = function() {
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"];
    var image = images[Math.floor(Math.random() * images.length)];
    return this.each(function() {
        var $obj = $(this);
        $obj.fadeOut(500,function() {
            $obj.css('background', 'url(http://l.yimg.com/g/images/' + image + ')').fadeIn(500);
        });
    });
}

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

Есть какие-нибудь советы, как это сделать?

1 Ответ

0 голосов
/ 30 мая 2011

Самый простой способ: создать глобальную переменную. 

var currentPic = 0;
$(function() {
    $("#bannerTable").loadBGImage();
    setInterval('$("#bannerTable").loadBGImage()', 5000);
});

$.fn.loadBGImage = function() {
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"];
    var image = images[currentPic];
    currentPic = (currentPic+1)%images.length; //loop once you reach last pic.
    [...]

Во-вторых, просто невозможно увидеть ребенка, пока родитель скрыт. Возьмите пример: 

<div style="display:none">hide me<span style="display:block">show me</span></div>

Ребенок будет скрыт, поскольку он внутри родителя. Чтобы это исправить, вы можете сделать их братьями и сестрами внутри нового родителя (<div><div /><span /></div>).

...