Question

我正在尝试通过更改背景图像来进行简单的滑动显示，而不必对每个图像路径进行硬编码。我将所有图像命名为“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操作的技巧是尽可能少地执行。

动态背景幻灯片

1 个答案: