Animation
1 |
http://jsfiddle.net/twTab/3/ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div id="animation"> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" /> <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" /> </div> onload = function startAnimation() { var frames = document.getElementById("animation").children; var frameCount = frames.length; var i = 0; setInterval(function () { frames[i % frameCount].style.display = "none"; frames[++i % frameCount].style.display = "block"; }, 30); } |