動畫背景圖像：後元件

Question

有了這個代碼：

#header .banner { background-color:#000; height:270px; } 
#header .banner:after { content: ""; background:url(/images/header_1.jpg) center center; width:100%; min-width: 1024px; height:270px; margin: auto; display: block;} 

我需要使/images/header_1.jpg爲其它圖像的過渡，使用JavaScript（jquery的）或CSS3。

這可能嗎？

Answer 1

有幾種方法可以做到這一點，如果你想圖像來回交替。最簡單的方法是將setInterval與JQuery的.css特性結合使用。

var state = 0; 
function start(){ 
    setInterval(function(){ 
     if(state=0){ 
      state = 1; 
      $("header").css("background","url(/images/header_1.jpg)") 
     } else { 
      state = 0; 
      $("header").css("background","url(/images/header_2.jpg)") 
     } 
    },1000); 
} 

start(); 

1000表示發生更改之前的時間（以毫秒爲單位）。

您還可以簡單地將圖像轉換爲動畫PNG。