动画背景图像：后元件

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。