javascript - jquery 或 javascript div 背景图像更改

Question

我在我构建的网站中遇到问题。我搜索 google 和 stackoverflow 但我找不到任何可以帮助我的东西。我有一个带有内容搜索引擎、文本等的 div ......我有背景图片。你也可以告诉我如何每隔 2-3 秒或任何我设置的渐变效果更改 div 背景图像，请我是 jquery 或 javascript 的菜鸟，所以请耐心等待。谢谢。

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

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

ps 工作示例 - http://jsfiddle.net/7xVAu/115/

希望这有帮助。

Answer 3

您可以从JQuery 文档开始。如果您不了解这些内容，请尝试寻找一些好的javascript 或 JQuery 书籍。此外， codecademy对初学者程序员也很有帮助。