Question

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

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

有没有人知道怎么做？

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

感谢您的帮助

Answer 1

我看到你不喜欢用div做这个，但你可以只为背景颜色制作动画。这是我对问题的解决方案。我已经使用了两个图像，因此您必须在阵列中添加一个网址，并将count % 2更改为count % 3以适合您的情况（背景有三个不同的图像）。这是小提琴：http://jsfiddle.net/5uBej/4/

来源：

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

我希望这些代码行能够帮助您： - ）。

最好的问候。

使用jQuery创建背景图像循环

1 个答案: