背景图像 JQuery 幻灯片答案

【问题标题】：Background image JQuery Slideshow背景图像 JQuery 幻灯片
【发布时间】：2011-05-30 13:52:55
【问题描述】：

我正在尝试使用 JQuery 制作背景图片幻灯片。我在这里找到了一个有趣的例子： Creating a JQuery Slideshow of a Background-Image

即：

$(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 的子元素始终可见，并且不会随父元素一起消失。

关于如何做到这一点的任何提示？

【问题讨论】：

对不起，我不太明白。但是主 div 的大小是 770 x 350px。不过，最重要的是下一个图像特征。
我希望它自动更改。
你能把链接放在这里你正在努力帮助你吗？

标签： jquery slideshow background-image

【解决方案1】：

最简单的方法：创建一个全局变量。

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>) 中的兄弟姐妹。

【讨论】：