背景图片JQuery幻灯片显示

问题描述

| 我正在尝试使用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的子元素始终可见，并且不与父元素一起消失。 有关如何执行此操作的任何提示？     

解决方法

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

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>

）中的兄弟姐妹。