每 10 秒更改一次图像（作为背景）答案

【问题标题】：Changing Images (as background) every 10 seconds每 10 秒更改一次图像（作为背景）
【发布时间】：2013-11-27 08:56:52
【问题描述】：

HTML

<div id="background">
     <img src="#" alt="Background Image" class="first"/>
     <img src="#" alt="Background Image" class="second"/>
</div>

我没有添加 SRC，因为它会减少我页面的加载时间。 (demo)

JQuery

        var current = "first";
        window.setInterval(function() {
            if(current == "first") {
                $("#background .second").prop("src", getMessage());
                setTimeout(function(){
                    $("#background .second").animate({
                        opacity: 1
                    }, 1000);
                    $("#background .first").animate({
                        opacity: 0
                    }, 1000);
                },1000);
                current = "second";
            } else if (current == "second") {
                $("#background .first").prop("src", getMessage());
                setTimeout(function(){
                    $("#background .first").animate({
                        opacity: 1
                    }, 1000);
                    $("#background .second").animate({
                        opacity: 0
                    }, 1000);
                },1000);
                current = "first";
            }
            getMessage()
        }, 5000);

所以我有一个数组，其中包含指向我的图像的 src 链接，这些链接由function getMessage()随机选择，当显示图片时，另一个 IMG 标记将更改 SRC 并等待一两秒钟以加载该图像，然后它将以动画形式显示。

但现在的问题是：当第一张图片的不透明度为 0 而第二张图片的不透明度为 1 时，他没有显示第二张图片。编辑：问题是图片之间的黑色渐变.

提前致谢！

【问题讨论】：

它在 IE 中为我工作.....
是的，它正在工作，但有黑色褪色。那应该是第二张照片。

标签： javascript jquery html css

【解决方案1】：

不要使用 setTimeout 添加缓冲区。你不需要这个。当用户的连接速度非常慢时会发生什么？您的 1000 毫秒不会这样做。正确的做法是创建一个 img 类型的新元素。并监听 onloadimage 事件。触发后，您可以显示图像。

这是一个例子： Load Image from javascript

除此之外，您还需要一些 CSS：

#background > img {position:absolute; top:0; left:0;}

【讨论】：

我会看看，比我现在拥有的更有意义，谢谢！
我会实现这个，我的主机的当前条件说明了为什么我需要这样做。

【解决方案2】：

您需要添加以下样式，它应该可以解决您的问题：

#background > img {position:absolute; top:0; left:0;}

【讨论】：

那么，当它清楚地解决了您的原始问题时，您为什么要删除它作为答案？

【解决方案3】：

尝试使用 attr() 函数而不是 prop() 或者尝试另一个：

$("#background .first").animate({
                        opacity: 1
                    }, 1000, function(){
// after finished first animation
$("#background .second").animate({
                        opacity: 0
                    }, 1000);
});

【讨论】：

【解决方案4】：

我真的建议使用 CSS 进行过渡。我做了一个 JSfiddle - http://jsfiddle.net/9GEAn/1/，它比您编写它的方式效率更高（我建议预加载图像，即使我没有在演示中）。

window.setInterval(function () {
    current++;
    if (current>=backgrounds.length) { current=0;}
    if ($bg1.css("opacity")==1) {
        $bg2.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg1.css("opacity","0");
    }
    else {
        $bg1.css({
            "background-image":"url("+backgrounds[current]+")",
            "opacity":"1"});
        $bg2.css("opacity","0");
    }
}, 5000);

【讨论】：