改变图像（背景）每10秒

HTML改变图像（背景）每10秒

<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 .. 编辑：问题是图片的之间的黑色褪色。

在此先感谢！

来源

2013-11-27 MikaldL

它在IE中为我工作..... –

是的，它的工作，但有一个黑色的褪色。这应该是第二张照片。 – MikaldL

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

下面是这样一个例子： Load Image from javascript

除了这个你需要一些CSS：

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

来源

2013-11-27 09:14:38

我会看看，现在我拥有更多的感觉，谢谢！ – MikaldL

我会实现这一点，我的主机的当前条件显示为什么我需要这样做。 – MikaldL

尝试使用ATTR（）函数，而不是道具（）或尝试另一个问题：

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

来源

2013-11-27 09:08:49 HICURIN

不起作用，感谢这个可能的答案。 :) – MikaldL

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

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

来源

2013-11-27 09:12:40 Pete

谢谢你哟！这是行得通的。 – MikaldL

那么，为什么当它明确解决你原来的问题时，将其作为答案删除？ – Pete

我真的建议使用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);

来源

2013-11-27 09:23:04

改变图像（背景）每10秒

回答

相关问题