使用jQuery在循環背景圖像之間淡出

Question

我試圖獲得傳統div的背景圖像（我的意思是它已經有一個背景圖像，我無法控制&因此不得不最初重寫）平滑無限期地在新圖像之間淡出。這是我到目前爲止：

var images = [ 
"/images/home/19041085158.jpg", 
"/images/home/19041085513.jpg", 
"/images/home/19041085612.jpg" 
]; 

var counter = 0; 
setInterval(function() { 
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")'); 
counter++; 
if (counter == images.length) { 
    counter = 0; 
} 
}, 2000); 

問題是，它不光滑（我瞄準的東西像innerfade插件）。

編輯：問題最初說「它不是無限的（它只能運行一次數組）」，但馬里奧糾正了我愚蠢的命名錯誤。編輯2：我現在使用Reigel的答案（見下文），它完美的工作，但我仍然無法找到任何順利淡入淡出圖像的方式。

所有幫助greatfully讚賞:)

Answer 1

經過大量實驗後，我不得不回答自己的問題 - 即在這一點上，我99％肯定它不能完成。

我應該說我的情況並不理想，因爲我試圖淡化背景的div在其中有其他html內容。如果沒有，那麼的Reigel代碼&組合馬里奧的最後建議，肯定會工作，即：

• Reigel的代碼後，
• 刪除遺留div的背景。
• 插入一個較低z索引的新div。
• 在這個新div的前景添加圖像。
• 使用您選擇的庫過渡。

雖然它會更簡單，只是使用jQuery刪除舊版div背景&然後插入圖像到div'前景'。

無論如何，只要留下這個以防其他人試圖做同樣的事情。另外我討厭沒有回答的問題:)

Answer 2

您需要首先加載圖像，然後切換到它

jQuery的淡入淡出，以全新的形象：您設置的前 jQuery fade to new image

Answer 3

預加載圖像將backgroundImage並同時更換

if (counter == colours.length) { 

與

if (counter == images.length) { 

編輯：圖像之間 衰落（注意我說的不是背景圖像）通過使用兩個圖像和變化的不透明度，直到一個是無形的，另一種是沒有這樣做。這意味着你需要在短時間內同時看到兩個圖像。如果你只使用一個背景圖像，這是不可能的。

你可以嘗試在現有的div

$(".home_banner").css({'backgroundImage':''}); 

去除背景圖像，並把IMG元素背後（使用較低的z-index）和淡入淡出這些。你甚至可以在這些插件上使用innerfade插件，讓它爲你處理褪色和循環。

Answer 4

試試這個...

var images = [ 
    "/images/home/19041085158.jpg", 
    "/images/home/19041085513.jpg", 
    "/images/home/19041085612.jpg" 
    ]; 

var counter = 0; 
setInterval(function() { 
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")'); 
    $('<img>').attr('src',images[++counter]); // preload the next image 
    if (counter == images.length) { 
     counter = 0; 
    } 
}, 2000); 

Answer 5

var bgrotate = function(imgpool, tg){ 
    var imgs  = imgpool, 
     loader  = new Image(), 
     domelements = new Array(), 
     current  = 0, 
     target  = tg; 

    return { 
     preload: function(){ 
      for(var i=0; i<imgs.length; i++){ 
       loader = new Image(); 

       loader.src = 'url("' + imgs[i] + '")'; 
       alert(loader); 
       domelements.push(loader);     
      } 
     }, 
     rotate: function(speed){ 
      tg.delay(speed).show(1, function(){ 
       tg.css('backgroundImage', domelements[current].src); 
       current = (current < domelement.lenght ? current++ : 0); 
      } 
     }, 
     stop: function(){ 
       tg.stop(true, false); 
     } 
    } 
} 



     $(document).ready(function(){ 
      var myobj = new bgrotate(['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif', 'http://sstatic.net/so/img/logo.png'], $('#mydiv')); 

      myobj.preload(); 
      myobj.rotate(); 
     } 

myobj.stop()結束循環。它沒有經過測試，但與此類似的東西應該可行。

Answer 6

只需在您的CSS中爲您更改背景的類放置一個-webkit-transition:1s;。

這對我來說很好。