使用 jQuery 创建背景图像循环

Question

在一个网站上工作，客户希望网站的“背景图像”循环显示 3 张图像。

现在我之前已经创建了循环（或安装了插件）来循环浏览 img 标签...但没有制作一个 jQuery 函数来联系 div 的 css 并为其提供一个新图像以每 7 秒“淡出”一次

...有人知道如何做到这一点吗？？？

---

现在我想让图像作为 div 中的 img 标签淡入淡出，但不幸的是，在这种情况下无法做到这一点，因为具有不断变化的背景图像的 div 的大小是可调整的，并且图像比它宽得多，需要定位在它的中心 - 使用 css image-position:center 标签...

感谢您的帮助

---

Answer 1

我发现您不喜欢通过 div 来执行此操作，但您可以仅对背景颜色进行动画处理。
这是我的问题的解决方案。我使用了两张图片，因此您必须在数组中再添加一个网址，并将 count % 2 更改为 count % 3 以适合您的情况（使用三个不同的背景图像）。
这是小提琴：http://jsfiddle.net/5uBej/4/

来源：

< strong>JS

(function ($) {
    var images = ['http://silviahartmann.com/background-tile-art/images/fire_flame/fire_seamless_background_2.jpg', 'http://www.myinkblog.com/wp-content/uploads/2008/06/polaroid-background.jpg'],
        count = 0, 
        timeout, interval = 1500;

    $('#foo').width($(document).width()); 
    $('#foo').height($(document).height());   

    (function changeBackground() {
        timeout = setTimeout(function () {
            $('#foo').fadeOut(function () {

                if (count === 100) {
                    count = 0;
                }
                $('#foo').css('background-image', 'url(' + images[count % 2] + ')');
                $('#foo').fadeIn();
                count += 1;
                changeBackground();
            });
        }, interval);
    }());
}($));

CSS

.foo {
    position: absolute;
    background-image: url(http://www.myinkblog.com/wp-content/uploads/2008/06/polaroid-background.jpg);
    left: 0px;
    top: 0px;
    z-index: -2147483648;
}
.content {
    background: #ccc;
    margin: auto;
    margin-top: 10px;
    width: 350px;
    height: 350px;
    z-index: 100;
    padding: 10px;
    border: 1px solid black;
}
h1 {
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    font-size: 30px;    
}

HTML

<div class="foo" id="foo"></div>

<div class="content">
    <h1>Sample header</h1>
    Sample content here...
</div>

我希望这些代码行对您有所帮助:-)。

此致。