请参阅下面的代码...它会在页面加载+ 8秒后更改图像,然后每1秒继续更改一次。
setInterval(function(){
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/45234.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/14134.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/124t234grq.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/frbvqw34.jpg');
setTimeout(function(){
$('#person1').attr('src', 'lastwavewinnerimages/14tqwrbfws.jpg');
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 8000);
此循环在8秒后执行。我希望它从页面加载的第一秒开始。怎么做。
答案 0 :(得分:7)
setInterval在第一次调用函数之前等待8000传递,你也可能想像这样重构代码:
$(function(){
var images = ['lastwavewinnerimages/wtrhwt.jpg',
'lastwavewinnerimages/t8yejty.jpg',
'lastwavewinnerimages/t2tgw8.jpg',
'lastwavewinnerimages/45234.jpg',
'lastwavewinnerimages/14134.jpg',
'lastwavewinnerimages/124t234grq.jpg',
'lastwavewinnerimages/frbvqw34.jpg',
'lastwavewinnerimages/14tqwrbfws.jpg'];
var i = 0;
function k() {
$('#person1').attr('src', images[i % images.length]);
i++;
}
setInterval( k, 1000 );
k();
});
答案 1 :(得分:1)
另一种方法可能是在每次迭代后设置超时:
(function() {
var imagearray = ['lastwavewinnerimages/wtrhwt.jpg',
'lastwavewinnerimages/t8yejty.jpg',
'lastwavewinnerimages/t2tgw8.jpg',
'lastwavewinnerimages/45234.jpg',
'lastwavewinnerimages/14134.jpg',
'lastwavewinnerimages/124t234grq.jpg',
'lastwavewinnerimages/frbvqw34.jpg',
'lastwavewinnerimages/14tqwrbfws.jpg'];
var i = 0; //credit goes to Esailija
(function nextimg() {
$('#person1').attr('src', imagearray[i++ % imagearray.length]);
setTimeout(nextimg, 1000);
})();
})();
答案 2 :(得分:-1)
它是Javascript that executes after page load
的副本您需要做的就是将您的代码放在window.onload事件下。您的代码将在页面加载后运行。更改图像时可能无法获得预期的结果。因为它会在您更改图像源时开始加载图像。如果您预先加载图像,您将获得预期的结果。以下是预加载图像的3种方法。
答案 3 :(得分:-2)
不要使用setInterval,而是编写这样的递归函数。
function loopImages() {
setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/wtrhwt.jpg')", 1000);
setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t8yejty.jpg')", 1000);
setTimeout("$('#person1').attr('src', 'lastwavewinnerimages/t2tgw8.jpg')", 1000);
..
..
..
..
..
setTimeout("loopImages()",0);
}
onload =“loopImages()”