动画背景图像：元素后

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;}

我需要使用javascript（jquery）或css3将/images/header_1.jpg转换为其他图片。

这可能吗？

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。