jQuery body背景圖像旋轉器

對於我正在設計的網站，我希望在圖像數組的旋轉上具有背景。我嘗試了多種方法，例如使用fadeIn（）和fadeOut（）函數，但它們似乎影響正文內部的不透明度。我也試過使用bgStretcher但是這引起了外觀問題，並使網站變得緩慢和波濤洶涌。jQuery body背景圖像旋轉器

我最好喜歡淡入淡出的圖像。幫助，將不勝感激，

Here's a link to the website 的腳本文件，我現在已經修改被稱爲/ JS /目錄下background.js。該文件目前被註釋掉，因爲它只是實驗性的。兩個當前背景圖像是「圖像/ BG/bg1.jpg」和「圖像/ BG/bg2.jpg」

這裏是讓我的工作，我正嘗試當前代碼：

$(document).ready(function() { 
    setInterval(switchImage, 5000); 
    switchImage(); 

}); 

function switchImage() 
{ 
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000); 
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000); 
}

一旦我能弄清楚如何在背景圖像之間轉換，我可以簡單地添加一些條件以在圖像數組之間進行切換。

乾杯，丹·威爾遜

來源

2012-06-02 Dane Wilson

請在您的問題*中發佈相關的代碼，您希望我們的幫助*。而且，理想情況下，發佈[現場演示]（http://jsfiddle.net/），否則，一旦這個問題的解決，這個問題已經不再使用（從您鏈接到頁面，因爲該問題的代碼將被糾正/刪除）。 –

與這個jQuery插件很簡單：jQuery Backstretch 在演示「的幻燈片使用非終點直道」是一個代碼片斷它。

來源

2012-06-02 11:56:04

這和我上面提到的bgStretcher一樣，但代碼更小更好。我想清楚是什麼讓它變得緩慢而波濤洶涌。這是因爲我試圖用一個覆蓋PNG具有透明性引起呈現問題。我通過保存我的圖片與圖案覆蓋固定該預申請 –

這可以用css3來完成。我會很快發佈一個小提琴。

編輯：我試圖使關鍵幀和CSS3的背景大小的動畫，但顯然他們不想在一起工作得很清楚（flickerings）。那麼可能更好地研究jQuery。

來源

2012-06-02 12:07:39

jQuery body背景圖像旋轉器

回答

相關問題