div背景图片的幻灯片+ jquery答案

【问题标题】：slideshow for div's background image + jquerydiv背景图片的幻灯片+ jquery
【发布时间】：2009-09-22 11:35:28
【问题描述】：

我在页眉有一个很大的 div 元素，并且 div 中有很多文本内容和一些框。我有一个很大的 img 作为这个 div 的 bg，现在我需要为这个 div 的背景制作幻灯片：/

如何为 div 的背景图片制作幻灯片？

我研究了很多，但找不到任何东西：/

非常感谢！欣赏！

【问题讨论】：

标签： javascript jquery html background slideshow

【解决方案1】：

这样做的一种方法是制作一个背景图像数组：

var bgArr = ["img/bg1.jpg", "img/bg2.jpg"]; //and so on...
function backgroundSlide(i) {
    $("#header").css("background-image", "url("+bgArr[i++]+")");
    if (i == bgArr.length) i = 0;
    var st = setTimeout(arguments.callee(i), 1000);
}
backgroundSlide(0)

这只会循环再循环...

【讨论】：

【解决方案2】：

我也在寻找 CSS 背景元素幻灯片，感谢您的输入。我使用 setTimeout 方法探索了您的解决方案，但是遇到了很多麻烦（我是菜鸟）。

我已经使用 setInterval 替代方案调整了 peirix 的解决方案，并提出了这个方案；

var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; 
var i=0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 5000)  

function swapBkgnd() {
 if (i>(bgArr.length-1) ) {
  i=0
  $("#header").css("background-image", "url("+bgArr[i]+")");
 }
 else {
  $("#header").css("background-image", "url("+bgArr[i]+")"); 
 } 
 i++;
};

现在我需要添加淡入淡出效果和图像预加载器，然后我就走了。有兴趣知道是否有更整洁的方法来实现这一目标。

【讨论】：

【解决方案3】：

您可以使用以下方式更改背景图片：

$("#mydiv").css("background-image", "url(1.jpg)");

要创建幻灯片，请使用 settimeout 定期调用它。

【讨论】：

【解决方案4】：

前几天我一直在寻找类似的解释。第二个答案非常好，但我可以看到它需要淡入淡出效果。我已经完成了（以及更多）。代码如下：

var bgArr = ['img1.png', 'img2.png', 'img3.png', 'img4.png']; 
var bgText = ['text1', 'text2', 'text3', 'text4']; 
var i=0;
var left = 0;

$(document).ready(function() {
    timer = setTimeout("changeBG()", 7000);

    $("#slider_left").on("click", function(){
        i = i-2;
        if(i&lt;-1) i = bgArr.length-2;         
                left = 1;       
                clearTimeout(timer);        
                changeBG();     
        });     
        $("#slider_right").on("click", function(){      
                if(i&gt;(bgArr.length-1)) i = 0;
        clearTimeout(timer);
        changeBG();
    });
});

function changeBG() {
    i++;
    if(i&gt;(bgArr.length-1)) i = 0;
    $('#slider_up').stop().fadeIn(1000, function(){
        if(left == 1){
        var a = i+1;
        if(i == bgArr.length-1)
            a = 0;
        }else{
        var a = i-1;
        if(i == 0)
            a = bgArr.length-1;
        }
        left = 0;

        $("#slider_up").css("background", "url("+bgArr[a]+") no-repeat center center white");
        $("#slider_up").css('opacity',0).show().animate({opacity:1});
        $("#slider_down").css("background", "url("+bgArr[i]+") no-repeat center center white");
        $("#slider_up").css('opacity',1).show().animate({opacity:0});
        $(".text_holder").fadeOut(1000, function() {
        $(this).html(bgText[i]);
        $(this).fadeIn(500);
        });
    });
    timer = setTimeout("changeBG()", 7000);
};

我已经在我的博客上解释过了：http://blog.braovic.com/css-background-slider-and-slideshow/

希望对大家有所帮助。最好的，赌注。

【讨论】：

【解决方案5】：

这可能会对您有所帮助 - https://github.com/im4aLL/bose

$("#header").bose({
    images : [ "imagePath_1", "imagePath_2", "imagePath_3"]
});

但只有淡入淡出过渡。祝你好运！

【讨论】：