jQuery的$（「主體」），圖像交換幫助

我有下面的代碼：

$(document).ready(function() { 
    var bgimages=new Array() 
    bgImages[0]="bg.jpg" 
    bgImages[1]="bg2.jpg" 
    //sloppy preload images 
    var pathToImg=new Array() 
    for (i=0;i<bgImages.length;i++) 
    { 
    pathToImg[i]=new Image() 
    pathToImg[i].src=bgImages[i] 
    } 

    var i = 0; 
    var rotateBg = setInterval(
    function(){ 
    $('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    }, 9000); 
});

我需要幫助解決2個問題：

它只會通過圖像循環一次，我算什麼我錯過了？我希望它無限重複。
我該如何交叉淡入圖像？

來源

2010-07-20 user44585

你需要確保你不超出指標上限的你的數組。

在你的情況，一個簡單的按位異或做這項工作：

i ^= 1;

如果你有你的數組中的多個元素，模運會做的工作：

i++; i %= bgImages.length;

對於交叉淡入淡出，你可能要考慮CSS transitions。甚至在頁面上都有一個例子。不過，這是W3C的工作草案，目前只有基於Webkit的瀏覽器才支持它。 Firefox應該在年底前支持它。沒有關於IE是否會支持它以及何時支持的言論。好的是創建起來非常簡單，不需要JS。

摘錄：

<style type="text/css"> 
div.fader img { -webkit-transition: all 1s ease-in-out; } 
img.swap1, div.fader:hover img.swap2 { opacity: 1.0; } 
div.fader:hover img.swap1, img.swap2 { opacity: 0; } 
</style>

來源

2010-07-20 12:47:12

我++; i％= bgImages.length; 像冠軍一樣工作。我會檢查通過CSS的交叉淡入淡出，謝謝一堆！ – user44585 2010-07-20 13:02:03

你可以嘗試

function(){ 
i=i<bgImages.length?i:0; 
$('body').css({backgroundImage:'url(' + bgImages[i] + ')'}); 
     i++; 
    } 
}

這每次都會重置我到0，則已經達到了數組末尾

來源

2010-07-20 12:41:28 Doga

jQuery的$（「主體」），圖像交換幫助

回答

相關問題