使用 jQuery 创建背景图像循环答案

【问题标题】：Create background-image cycle with jQuery使用 jQuery 创建背景图像循环
【发布时间】：2012-01-05 14:32:07
【问题描述】：

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

现在我在之前创建了循环（或安装了插件）来循环通过 img 标签......但没有创建一个 jQuery 函数来联系 div 的 css 并给它一个新图像以“淡化”到每 7 秒。 ..

有人知道怎么做吗？？？

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

感谢您的帮助

【问题讨论】：

只需使用多个带有背景图像集的容器，然后循环浏览这些容器。否则，除非您使用 css3 过渡，否则您将无法制作动画（我认为他们可以处理，但我没有弄乱他们）。

标签： css image rotation background-image

【解决方案1】：

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

来源：

(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>

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

最好的问候。

【讨论】：