大家好我只使用 javascript 和 css 技术制作 Sprite 动画，但它不会做任何循环。当它到达图像的末尾时，它已经变成了空白图像。
这是我的代码:
<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++;
}
关于Javascript 代码不循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27355315/