Javascript代碼不循環

嗨大家好我一直只使用javascript動畫一個精靈動畫，但它不會做任何循環。當它到達圖像的末尾時，它已經變成了空白圖像。Javascript代碼不循環

這裏是我的代碼：

<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

請向我解釋什麼是錯我的代碼還，如果有人可以幫我修好它我非常感謝。

來源

2014-12-08 sa.lva.ge

您的圖片上有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/

來源

2014-12-08 10:02:57

有什麼辦法不計算框架？ – 2014-12-08 10:06:23

否則你可以測試圖片的寬度 – 2014-12-08 10:09:37

你的意思是測試寬度？ – 2014-12-08 10:10:44

Javascript代碼不循環

回答

相關問題