循環的CSS背景

嘿，我只是想知道如何循環一堆圖像，並將它們設置爲div的背景。循環的CSS背景

我正在做的是：設置第一個圖像作爲背景的div。等待X秒。將下一張圖像設置爲背景。等待X秒...等等，然後繼續

我有下面的代碼適用於1圖像。

$(document).ready(function() { 
    var source = $(".field-field-background img:first").attr("src"); 
    $('.field-field-background img:first').remove(); 
    $('#main-inner').css('background', 'url('+ source +') no-repeat'); 
});

我猜我需要通過陣列圖像源的一個數組，循環，並將其設置爲背景，與地方在循環的延遲。任何想法我會怎麼做？

來源

2010-09-03 Conor Mongey

爲什麼推倒重來;）http://buildinternet.com/live/supersized/ – Tim 2010-09-03 14:47:19

有一個循環插件做的事情非常相似，不知道它是否會幫助你。 http://jquery.malsup.com/cycle/ – 2010-09-03 14:47:31

$(document).ready(function() { 
    Cycler={}; 
    Cycler.src=['path/to/img1', 'path/to/img2', 'path/to/img3']; 
    Cycler.cur=0; 
    Cycler.cycle=function() { 
    if(++Cycler.cur>=Cycler.src.length) { 
     Cycler.cur=0; 
    } 

    $('#main-inner').css('background', 'url('+ Cycler.src[Cycler.cur] +') no-repeat'); 
    setTimeout(Cycler.cycle, 5000);//5 seconds 
    } 

    Cycler.cycle(); 
});

來源

2010-09-03 14:51:21 aularon

什麼是Cycler？ – 2010-09-03 15:16:19

對不起，'Cylcler'是一個命名空間（如果你想這樣命名的話就是一個臨時對象），我是爲了收集所有相關的東西，我只是忘了先用'Cycler = {};'來介紹。現在修復。 – aularon 2010-09-03 15:20:06

我愛你的方法比其他解決方案。如果您可以添加淡入淡出和淡出過渡效果代碼，那將會很棒。 – 2011-07-13 09:15:53

試試這個：

setInterval(function(){ 
    var source = $(".field-field-background img:first").attr("src"); 
    $('.field-field-background img:first').remove(); 
    $('#main-inner').css('background', 'url('+ source +') no-repeat'); 
},4000);

來源

2010-09-03 14:52:35

一個jQuery的最大的優點是它有一個very robust plug-in community。你可能想要完成的許多任務在你之前已經被別人解決了。特別是對於像這樣的常見任務，我建議首先尋找插件，然後再嘗試重新發明輪子。許多插件具有經過嚴格測試和多個版本的優勢，從而獲得拋光產品。

jQuery Cycle plug-in將是一個很好的候選人，如果你正在尋找幻燈片式效果。如果你想要的是週期的背景下，同時保持前景元素，你可能看更多的東西是這樣的：Advanced jQuery background image slideshow

來源

2010-09-03 17:14:15 Ender

循環的CSS背景

回答

相關問題