Js让静态人物动起来Demo演示

body{background-color:white; margin: 0 0 0 10px; width:98%;}
#allHead{display:none;}
#allFoot{display:none;}
#footLine{display:none;}

演示：

// var picSub = 0;

var noa = 0;

var time = 150; //时间间隔(毫秒)

var pic1 = "http://img.my.csdn.net/uploads/201209/01/1346496065_1539.png";
var pic2 = "http://img.my.csdn.net/uploads/201209/01/1346496058_9216.png";
var pic3 = "http://img.my.csdn.net/uploads/201209/01/1346496051_4596.png";
var pic4 = "http://img.my.csdn.net/uploads/201209/01/1346496065_1539.png";
var picArr = [pic1, pic2, pic3, pic4]; //定义数组，并将图片的位置所对应的变量放入其中

setInterval(changeImg, time); //使图片按一定时间切换

function changeImg()
{
var xElem = document.getElementById("ID_IMG_ROLE");

if(picSub == picArr.length-1){
picSub = 0;
}else{
picSub += 1;
} //判断是否超出数组长度，若超出，便使数组下标归0,使其不超出

xElem.src = picArr[picSub]; //切换图片

/*for(var i = 0; i < 2; i++){
setInterval(function(){changeFight(); noa += 1;}, 2000);
}*/
}

function changeFight()
{
pic1 = "http://img.my.csdn.net/uploads/201209/01/1346496030_4753.png";
pic2 = "http://img.my.csdn.net/uploads/201209/01/1346496015_5135.png";
pic3 = "http://img.my.csdn.net/uploads/201209/01/1346496000_2355.png";
pic4 = "http://img.my.csdn.net/uploads/201209/01/1346495975_2981.png";

picArr = [pic1, pic2, pic4, pic3];

setTimeout(reduction, 600);
}

function reduction()
{
pic1 = "http://img.my.csdn.net/uploads/201209/01/1346496065_1539.png";
pic2 = "http://img.my.csdn.net/uploads/201209/01/1346496058_9216.png";
pic3 = "http://img.my.csdn.net/uploads/201209/01/1346496051_4596.png";
pic4 = "http://img.my.csdn.net/uploads/201209/01/1346496065_1539.png";
picArr = [pic1, pic2, pic3, pic4];
}
// ]]>