如何使用jquery每隔幾秒循環一次css背景圖像？

我想每隔幾秒更改一次頭部CSS背景圖像，所以它看起來像幻燈片。如何使用jquery每隔幾秒循環一次css背景圖像？

例如最初2秒是：

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}

接着2秒是：

body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}

接着2秒是：再次

body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}

然後循環至頭1。

如果有人知道如何做一個衰落效應的過渡，那麼它將是完美的。

來源

2009-09-03 Sergio del Amo

'body＃home h1＃siteH1'是一個非常低效的選擇器。爲什麼不使用'＃siteH1'？ – 2009-09-03 22:36:54

對於我的信息，jQuery選擇器的情況也是這樣嗎？ – Ropstah 2009-09-04 18:24:44

結賬隊列功能：

jQuery Queue

來源

2009-09-03 17:41:25 Slee

淡入現在

試試這個：

var currentBackground = 0; 
var backgrounds = []; 
backgrounds[0] = '../images/header1.jpg'; 
backgrounds[1] = '../images/header2.jpg'; 
backgrounds[2] = '../images/header3.jpg'; 

function changeBackground() { 
    currentBackground++; 
    if(currentBackground > 2) currentBackground = 0; 

    $('body#home h1#siteH1').fadeOut(100,function() { 
     $('body#home h1#siteH1').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('body#home h1#siteH1').fadeIn(100); 
    }); 


    setTimeout(changeBackground, 2000); 
} 

$(document).ready(function() { 
    setTimeout(changeBackground, 2000);   
});

來源

2009-09-03 17:45:26 Ropstah

您的代碼立即執行。在更改背景之前不會等待，並且不會再次進入初始背景。 – 2009-09-03 17:59:59

基本上，我想循環beetween背景圖片 – 2009-09-03 18:00:38

查看更新的答案... – Ropstah 2009-09-03 21:56:31

遲到了，但這裏是我剛來滿足類似的要求。

<script type="text/javascript"> 
//populate image set 
var imageAry = ["1.jpg","2.jpg","3.jpg","4.jpg"]; 
//in milliseconds 
var fadeSpeed = "1000"; 
var timeout = 3000; 


function fadeInFront (i){ 
    $('#faderFront').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeIn(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeOutFront(i); 
    },timeout); 
} 
function fadeOutFront (i){ 
    $('#faderBack').css({ 
     "background-image" : "url("+imageAry[i]+")" 
    }); 
    $('#faderFront').fadeOut(fadeSpeed); 
    i++; 
    if (i==imageAry.length){i=0;} 
    setTimeout(function(){ 
     fadeInFront(i); 
    },timeout); 
} 
function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

$(document).ready(function(){ 
    preload(imageAry); 
    setTimeout(function(){ 
     fadeOutFront(3); 
    },timeout); 
}); 
</script> 

<style type="text/css"> 

      #faderBack, 
      #faderFront, 
      #inFrontOfBoth 
      { 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
      #faderFront 
      { 
       background: url("4.jpg") no-repeat center top; 
      } 
</style> 

<body> 

<div id="container"> 

    <div id="faderBack"></div> 
    <div id="faderFront"></div> 
    <div id="inFrontOfBoth">Hello World</div> 
</div>

來源

2013-12-01 22:41:15 Yevgeniy

如何使用jquery每隔幾秒循環一次css背景圖像？

回答

相關問題