爲div的背景圖像幻燈片+ jquery

Question

我有一個大的div元素在標題，有很多文本內容和div中的一些框。我有一個大的img作爲bg這個div，現在我需要爲這個div的背景製作幻燈片：/

我該如何爲div的背景圖片製作幻燈片？

我研究了很多，但沒有找到任何東西：/

非常感謝！欣賞！

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

這只是環和環...

Answer 2

您可以使用以下方法來更改背景圖片：

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

爲了創建幻燈片，使用settimeout定期調用它。

Answer 3

我也在尋找一個CSS背景元素幻燈片，感謝您的輸入。我用setTimeout方法探索了你的解決方案，但是它有很大的麻煩（我是一個noob）。

我已將peirix的解決方案與setInterval替代方案相匹配，並提出了這個問題;

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

現在我需要添加淡入淡出效果和圖像預加載器，我會離開。會有興趣知道是否有一個更簡單的方法來實現這一點。

Answer 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<-1) i = bgArr.length-2;   
       left = 1;  
       clearTimeout(timer);   
       changeBG();  
     });  
     $("#slider_right").on("click", function(){  
       if(i>(bgArr.length-1)) i = 0; 
     clearTimeout(timer); 
     changeBG(); 
    }); 
}); 

function changeBG() { 
    i++; 
    if(i>(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/

希望這有助於大家。 Best， Ante。

Answer 5

這可能會幫助你 - https://github.com/im4aLL/bose

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

但是，只有淡化過渡。祝你好運！