jquery或javascript div背景图像更改

Question

我有一个问题在我建立的网站。我搜索谷歌和stackoverflow，但我不能找到任何可以帮助我的东西。我有一个div与内容搜索引擎，文本etc...and我有背景image.So你能告诉我如何改变div背景图像每2-3秒或任何我设置淡入淡出效果，请我是新手与jquery或javascript，所以是一个patient.Thank你。

Answer 1

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>

jquery代码

 jQuery.timer = function (interval, callback)
 {

 var interval = interval || 100;

if (!callback)
    return false;

_timer = function (interval, callback) {
    this.stop = function () {
        clearInterval(self.id);
    };

    this.internalCallback = function () {
        callback(self);
    };

    this.reset = function (val) {
        if (self.id)
            clearInterval(self.id);

        var val = val || 100;
        this.id = setInterval(this.internalCallback, val);
    };

    this.interval = interval;
    this.id = setInterval(this.internalCallback, this.interval);

    var self = this;
};

return new _timer(interval, callback);
};

var current_panel = 2;
var animation_duration = 2500;  
$.timer(6000, function (timer) {  
    switch(current_panel){  
        case 1:  
           $("#banner .img1").fadeIn(800);

           $("#banner .img2").fadeOut(800);
            current_panel = 2; 
        break; 
        case 2: 
            $("#banner .img2").fadeIn(800);

             $("#banner .img1").fadeOut(800);
            current_panel = 1; 
        break; 

        timer.reset(12000);  
     }  
 });  

Answer 2

据我所知，在没有额外标记的情况下，没有办法改变带有淡入淡出效果的背景图像。您没有提供任何代码，所以我创建了一个合成示例。

标记：

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

CSS：

/*
    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*/
}

和一些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);

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

附注：工作示例- http://jsfiddle.net/7xVAu/115/

希望这能帮上忙。

Answer 3

你可以从JQuery docs开始。如果你不理解这些东西，试着找一些好的javascript or JQuery books。此外，codecademy对初学者程序员非常有帮助。