在web上使用JS和多张图片实现逐帧动画

用javascript和多张图片做一个简单的动画
首先需要将图片名字统一 顺序固定

在html里面引入img 并且定位好

<div id="test">
			<img  onclick="start()" id="testImg" src="img/Final-帧/img-%20(1).png" >
		</div>

Js代码

alert("欢迎使用，点击图片开始。");
			function start(){	
				var n = 2;
				start = function(){};
				setInterval(function(){
					document.getElementById("testImg").src = "img/Final-帧/img-%20("+n.toString(10)+").png";
					n = n + 1;
					if(n > 100){
						document.getElementById("testImg").remove();
					}
				},100);
			}

然后就可以播放了
原理就是一直更新img标签里面的src 本地还行 放到web上面就可能没那么流畅。