【web前端】小人行走

一个小人在页面中行走，可以加快、变慢、暂停以及继续。
图如下：

当走到最右边时，会回到左边，实现循环。
当时的想法：
首先在网上找了一张图，一个小人的行走分解图，将这张图裁剪成了6张，就是行走分解图。
然后操作如下：

var i=1;
var j=0;
var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
function qiehuan(){
	var w1=0;
	var w2=window.innerWidth;
	i++;
	for(var z=0;z<20;z++){j++;}
	w1=j*1;
	if(i>5){
		i=1;
		}
		if(w1>w2){w1=0;j=0;}
	document.getElementById('img').src=imgs[i];
	document.getElementById('img').style="margin-left:"+w1+"px";
}

每3毫秒切换一张图片：

var myVar=setInterval("qiehuan()",300);

由此实现了小人的行走。
变慢操作的实现，清空myVar，设置成每5毫秒切换一张图片：

clearInterval(myVar);
myVar=setInterval("qiehuan()",500);

加快操作同变慢。
暂停即只需要清myVar即可，继续就赋予MyVar初值。
完整代码如下：
js：

var i=1;
var j=0;
var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
function qiehuan(){
	var w1=0;
	var w2=window.innerWidth;
	i++;
	for(var z=0;z<20;z++){j++;}
	w1=j*1;
	if(i>5){
		i=1;
		}
		if(w1>w2){w1=0;j=0;}
	document.getElementById('img').src=imgs[i];
	document.getElementById('img').style="margin-left:"+w1+"px";
}

var myVar=setInterval("qiehuan()",300);
function bianman(){
	clearInterval(myVar);
	myVa