改變圖像（背景）每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秒

回答

相關問題