我的首页上有一个广告幻灯片。它包含2个图像。
我预加载了这两个图像，制作了new Image()并将它们设置为.src。
我有一个函数giveNextName返回下一个图像的名称（应该在src元素的img属性中）（我这样做是因为幻灯片很快将包含2个以上图像）
因此，主要代码如下所示：
BillBoard = {};
BillBoard.folder = "/pictures/cards/";
BillBoard.ext = "png";
BillBoard.$ = $("#billboard img");
BillBoard.pics = 2;
BillBoard.changeTime = 7000;
BillBoard.names = ["ad1","ad2"];
BillBoard.currentState = 0;
BillBoard.images = // array of preloaded Images
(function(){
var image, images = [];
for (var i=0; i<BillBoard.pics; i++) {
image = new Image ();
image.src = BillBoard.folder+BillBoard.names[i]+'.'+BillBoard.ext;
images.push (image);
}
return images;
}());
BillBoard.giveNextName = function(){/* getting the next name */};
// BillBoard change action
BillBoard.change = function(){
BillBoard.$.fadeOut(function(){
$(this).attr('src', BillBoard.giveNextName());
$(this).fadeIn();
});
}
// Starting BillBoard
window.setInterval(BillBoard.change, BillBoard.changeTime);
因此，想法很简单。使用
window.setInterval我每n秒调用一次BillBoard.change。但是，我不知道为什么，广告牌变得越来越快，直到根本没有图片为止（fadeIn没有时间执行）我的错误在哪里？
UPD。感谢Yann Ramin的链接。
我不应该每隔n秒通过
BillBoard.change调用window.setInterval。相反，我应该在BillBoard.change的回调中添加fadeOut()的调用。我的意思是这段代码：
BillBoard.change = function(){
BillBoard.$.fadeOut(function(){
$(this).attr('src', BillBoard.giveNextName());
$(this).fadeIn();
window.setTimeout(BillBoard.change, BillBoard.changeTime);
});
}
// simply call the change function
// it will be calling itself every n seconds
BillBoard.start = (function(){
window.setTimeout(BillBoard.change, BillBoard.changeTime);
}());
最佳答案