動態背景幻燈片

Question

我想通過更改背景圖像而不必硬編碼每個圖像路徑來做一個簡單的slideshow。我在最後用一個數字命名了所有圖像「slideShow」（slideShow1.png/slideShow2.png）。這是我的代碼，但它只是淡出原始背景圖像，而不是用新的背景圖像來代替它。請幫忙 謝謝。

var imgArr = new Array(); 
for(var i=0; i < 5; i++){ 
var count = i+1; 
imgArr[i] = new Image(); 
imgArr[i].src = "http://localhost/website/css/images/slideShow" + count + ".png"; 
} 

function changeImg(){ 
for(var i=0; i < imgArr.length; i++){ 
$('#slideshow').animate({opacity: 0}, 1000, function(){ 
$(this).css('background',"url('" + imgArr[i].src +"') no-repeat scroll 0 0 transparent") 
}).animate({opacity: 1}, 1000); 
} 
}; 
var startRolling = setInterval(changeImg, 3000); 

Answer 1

很多改變你的代碼：

不要做新的Array（）。只需使用var x = [];無論哪種情況，您都不需要這裏。

您不需要創建圖像對象來設置背景圖像。你可以，如果你想預載圖像，但這可能是一個複雜的情況在你的情況。

修改後的代碼：

(function(){ 
    var count = 0, 
    slideshow = $('#slideshow'), 

    startRolling = setInterval(function(){ 

     count > 5? 
      count = 0: 
      count++; 

     slideshow.css('background-image', 'url(http://localhost/website/css/images/slideShow' + count + '.png'); 

    }, 3000); 
})(); 

注意，我不是在淡入在這個例子中/淡出動畫添加。我把它作爲OP的一個練習來解釋這一部分。

另外，請注意，你應該只有正在改變需要改變的CSS屬性。因此，需要在樣式表中設置「無重複滾動0 0透明」的額外定義，而不是直接通過樣式對象進行設置。記住，任何類型的DOM操作都是儘可能少地做到這一點。