如何使用jQuery和圖像數組更改#header的css屬性？

我想編輯一個腳本，如下所示更改div的圖像，以更改#header的background-image屬性。如何使用jQuery和圖像數組更改#header的css屬性？

正如你可以在我的小提琴看到這裏，http://jsfiddle.net/HsKpq/460/我試圖展示images into the $('#header').css('background-image',..................).fadeTo('slow',1);

我怎樣才能做到這一點？我想我必須要改變其他一些地區也..

var img = 0; 
var imgs = [ 
    'http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg', 
    'http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg', 
    'http://www.istockphoto.com/file_thumbview_approve/9712604/2/istockphoto_9712604-spring-sunset.jpg' 
]; 
// preload images 
$.each(imgs,function(i,e){var i=new Image();i.src=e;}); 

// populate the image with first entry 
$('img').attr('src',imgs[0]); 


var opacity = 0.1; // change this for minimum opacity 
function changeBg() { 
    $('img').fadeTo('slow',opacity,function(){ 
     $('#header').css('background-image',..................).fadeTo('slow',1); 
    }); 
} 



setInterval(changeBg,5000);

來源

2014-06-09 EnexoOnoma

http://jsfiddle.net/HsKpq/460/你已經完成460更新?? ??！ – CMPS

@Amir它不會更改標題的背景圖像屬性，而是標題中的「」。這意味着它會更改頁面中的所有圖像。不是我想要的！ – EnexoOnoma

你需要一些修正：

使用一個簡單的增量來跟蹤當前圖像的。
typo：「images」 - >「imgs」
$（「img」）不會選擇任何內容，所以JQuery淡入淡出「完成」回調從未被觸發（我假設您的意思是淡化div本身）
你需要「URL（的 'http：// ...'）」爲"background-image" CSS property

function changeBg() { 
    if (i >= imgs.length) i=0; 
    $('#header').fadeTo('slow',opacity,function(){ 
     var val = "url('" + imgs[i++] + "')"; 
     console.log(val); 
     $('#header').css('background-image',val).fadeTo('slow',1); 
    }); 
}

這裏是updated demo。

來源

2014-06-09 23:07:01 McGarnagle

有趣...但當3圖像結束時，它不會重新啓動.. – EnexoOnoma

@Fataoulas這是一個相對簡單的修復，只需重置i = 0，一旦它超過了數組長度（鏈接更新）。 – McGarnagle

非常感謝你，我已經接受你的答案。出於知識的原因，當第三張圖像變回第一張圖像時，爲什麼在顯示第一張圖像之前有這麼短的白色背景持續時間？ – EnexoOnoma

如何使用jQuery和圖像數組更改#header的css屬性？

回答

相關問題