Javascript 代码未循环

Javascript Code Not Looping

本文关键字：循环 代码 Javascript      更新时间：2023-09-26

大家好，我一直在只使用javascript和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

请向我解释我的代码出了什么问题，如果有人可以帮助我修复它，我非常感谢。

你的图片上有 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/

相关文章：