2013-02-22 130 views
3

問題是我的背景圖片大小不同且不可預知,因此使用CSS過渡會使拉伸更具動感,看起來很醜。因此,我真的需要用JS來做到這一點。同時淡入淡出背景圖片

var images = [ 
    "http://ns223506.ovh.net/rozne/e800637ee8c7de5cdaed8df8ea3635f1/wallpaper-2585508.jpg", 
    "http://ns223506.ovh.net/rozne/15382371cb0d5b9319f5f4469bbc4511/wallpaper-2585497.jpg" 
]; 

var counter = 0; 
setInterval(function() { 
    $(".bg").css('backgroundImage', 'url("' + images[counter] + '")'); 

    $('<img>').attr('src', images[++counter]); // preload the next image 

    if (counter == images.length) counter = 0; 

}, 2000); 

http://jsfiddle.net/mVAvF/1/

我想要做的是新的背景圖片,而淡出老淡入。有什麼建議麼?

+0

'反== images.length'應該是'計數器==(images.length-1)',對吧? 'images [2]'不包含元素。 – Johan 2013-02-22 13:41:09

回答

2

您不能在相同元素中淡入一個背景到另一個背景。 您必須在當前背景之上或之後添加另一個元素,然後將新元素淡入,如果它位於最前面或淡出舊元素,如果新元素落後。

我回答了類似的問題包含的jsfiddle前: jQuery background image rotation script - looking to modify