jquery或javascript div背景图像更改

我在我建立的网站上有个问题。我搜索谷歌和stackoverflow，但我找不到任何可以帮助我的东西。我有一个div，内容搜索引擎，文本等。我有背景图像。所以你能告诉我如何每隔2-3秒或者我设置的任何淡入淡出效果来更改div背景图像吗，我不懂jquery或javascript，所以请耐心等待。谢谢。

您可以从这里开始。如果你不懂这些东西，试着找一些好的。对初学者程序员也很有帮助。

html代码

    <div id="banner">

  <img class="img1" height="251" width="650" alt="img1" src="images/banner1.jpg"/>

  <img class="img2" height="251" width="650" alt="img2" src="images/banner2.jpg"/>

</div>

---

据我所知，在没有附加标记的情况下，无法使用淡入淡出效果更改背景图像。您没有提供任何代码，因此我制作了一个合成示例

标记：

<div class="container">
    <div class="bg">
    </div>
    <div class="content">
        ... 
    </div>
</div>
...

还有一些jquery：

//in your case, here must be URLs for images
var arr = ["yellow", "blue", "green", "red"]; 
var i = 0;

var intervalID = setInterval(function() {
    //when bg fades, we don't want to see  
    //transparent background                             
    $('.container').css('background-color', arr[i]); 

    //make transparent, change background, make visible again
    $('.bg').animate({opacity: 0}, 'slow', function() {
        $(this).css({'background-color': arr[i]}).animate({opacity: 1});
    });

    //this can be random
    i++;
    if (i >= arr.length)
        i = 0;
}, 2000); //change 2000 if you want different time between changes


//this one is illustating, how to stop background loop
//with "clearInterval". You might want to use it on :hover or smth like that
setTimeout(function(){
    clearInterval(intervalID);
    }, 20000);

这不是一个非常灵活的解决方案，因为您需要知道元素的确切大小，但我认为您不会使用不同大小的图像作为背景

p、 美国工作实例-

---

希望这能有所帮助。

我曾经听说，如果你为一个人生火，你会让他温暖一晚，但如果你让一个人生火，他会温暖一辈子。我稍后会尝试这一点，但现在我必须构建它。当我学习javascript或JQuery的新功能时，我总是从文档开始。它们是决定性的指南。

/*
    this is your main container 
*/
.container {
    width:300px;
    height:300px;
}

/*
    this one is needed to provide 
    independent background, when it fades
    your content will still be available for seeing
*/
.bg {
    width:300px;
    height:300px;
    background-color:yellow;
    z-index:0;
}

/*
    your content, obviously :)
*/
.content {
    position:relative;
    top:-300px;
    z-index:1;
    padding:5px; /*just for better looking*/
}

//in your case, here must be URLs for images
var arr = ["yellow", "blue", "green", "red"]; 
var i = 0;

var intervalID = setInterval(function() {
    //when bg fades, we don't want to see  
    //transparent background                             
    $('.container').css('background-color', arr[i]); 

    //make transparent, change background, make visible again
    $('.bg').animate({opacity: 0}, 'slow', function() {
        $(this).css({'background-color': arr[i]}).animate({opacity: 1});
    });

    //this can be random
    i++;
    if (i >= arr.length)
        i = 0;
}, 2000); //change 2000 if you want different time between changes


//this one is illustating, how to stop background loop
//with "clearInterval". You might want to use it on :hover or smth like that
setTimeout(function(){
    clearInterval(intervalID);
    }, 20000);