Question

我正在尝试使用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的子元素始终可见，而不是与父级淡化。

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

Answer 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>）中将它们作为兄弟姐妹。

背景图片JQuery幻灯片

1 个答案: