动态背景幻灯片

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操作都是尽可能少地做到这一点。