Question

大家好我只使用javascript＆amp; amp; css技术它的动画，但它不会做任何循环。当它到达图像的末尾时，它已经变成了空白图像。

这是我的代码：

<html>  
<head>
    <style type="text/css">         
        .container 
        { 
            width: 512px; 
            height: 512px; 
            overflow: hidden; 
        }    
    </style>

    <script type='text/javascript'>    
        document.onreadystatechange = function () 
        {
            if (document.readyState == "complete") 
            {
                setInterval(next, 100);
            }
            else
            {
                return false;
            }
        }

        var frame = 1;

        function next()
        {
            var left = 512 * frame;    
            var top = 0;
            var elementStyle = document.getElementById('image').style;

            elementStyle.position = "relative";
            elementStyle.top = '-'+top+'px';
            elementStyle.left = '-'+left+'px';

            frame++;
        }
    </script>    
</head>    
<body>    
    <div class="container">
        <img id="image" src="flame_sprite.png" />
    </div>
</body>
</html>

这是我用来测试代码的图片：

http://www.thecave.info/wp-content/uploads/2014/08/flame_sprite.png

请向我解释我的代码有什么问题，如果有人可以帮我解决，我非常感谢。

Answer 1

你的照片上有6帧，你必须在其上循环，添加if(frame == 6 ) frame = 0;以重新开始动画。

function next()
{
    if(frame == 6 ) frame = 0;

    var left = 512 * frame;

    var top = 0;

    var elementStyle = document.getElementById('image').style;

    elementStyle.position = "relative";

    elementStyle.top = '-'+top+'px';

    elementStyle.left = '-'+left+'px';

    frame++;

 }

显示结果：http://jsfiddle.net/59yhuk8L/

Javascript代码不循环

1 个答案: