Question

嗨我正在制作类似马里奥游戏的乐趣，我坚持让马里奥自己动画，就像让他的手臂/腿移动一样。我有它的代码，如果我分解它的工作原理，但是到目前为止我还没有将它分开，以便它实际上是可见的。到目前为止，我已经尝试过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);
};

如果有人可以提供帮助，我将不胜感激:) 非常感谢你如果您有任何疑问，请询问

Answer 1

由于某种原因，延迟不适用于所有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)
};

Answer 2

这是我的解决方案。 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

用jquery连续改变图像

2 个答案: