0

我正在尝试通过更改背景图像来做一个简单的幻灯片放映，而不必对每个图像路径进行硬编码。我将所有图像命名为“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);
4

1 回答 1

1

对您的代码进行了很多更改：

不要做新的数组（）。只需使用 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 操作的诀窍是尽可能少地进行操作。

于 2012-08-16T21:48:08.550 回答