嗨我正在制作类似马里奥游戏的乐趣,我坚持让马里奥自己动画,就像让他的手臂/腿移动一样。我有它的代码,如果我分解它的工作原理,但是到目前为止我还没有将它分开,以便它实际上是可见的。 到目前为止,我已经尝试过setTimeout和.delay但是没有工作
此处是我的js代码,目前使用.delay函数。
function animateMario() {
// cycles through other 4 images
for (var i=1; i<5; i++) {
$('#mario').attr('src', 'images/mario/mario_f_'+i+'.png').delay(100);
}
// returns to original image
$('#mario').attr('src', 'images/mario/mario_f_0.png').delay(100);
};
如果有人可以提供帮助,我将不胜感激:) 非常感谢你 如果您有任何疑问,请询问
答案 0 :(得分:0)
由于某种原因,延迟不适用于所有jQuery函数,因此您需要使用interval。试试这个代码,它对我有用:
function animateMario() {
var i = 1;
var timer = setInterval(function(){
$('#mario').attr('src', 'images/mario/mario_f_'+i+'.png');
i++
if(i==5){
clearInterval(timer);
$('#mario').delay(1000*(i+1)).attr('src', 'images/mario/mario_f_0.png');
}
}, 100)
};
答案 1 :(得分:0)
这是我的解决方案。 Jsfiddle Example. 没有延迟,不需要jQuery :) 查看简单的代码。
//select the element with the #mario ID
var el_image = document.getElementById('mario');
//array with the image
var img = [
'http://u.cubeupload.com/FollowTheWeb/1.png',
'http://u.cubeupload.com/FollowTheWeb/2.png',
'http://u.cubeupload.com/FollowTheWeb/3.png',
'http://u.cubeupload.com/FollowTheWeb/4.png',
'http://u.cubeupload.com/FollowTheWeb/5.png'
];
//functionfor create the animation
var i=0;
function frame_switch ()
{
el_image.src = img[i]; //change the src attribute
if(i > 3){ //is the index is 4 set i=0
i=0;
}else{i++; }
}
setInterval(frame_switch,150); //repeat the function frame_swith() each 150ms