<html>
<head>
<script>
var xp=0;
var imgIndex=1;
var moveTimer;
function move(){
xp=xp+20; //每一次div的位移的輻度
document.getElementById('red').style.left=xp+'px'; //開始的位置,px像素
imgIndex=imgIndex==5?1:(imgIndex+1); //圖片的數量，結束之後從第一張開始循環；
document.getElementById('red').className='img'+imgIndex //圖片的循環
if(xp>=1290)
clearInterval(moveTimer); //用於限制跑的距離，超出將會被終止；
}
window.οnlοad=function(){ moveTimer=setInterval(move,80);} //移動的速度
</script>
<!-- 在一張人體解析圖片上，獲取每個動作的高和寬以及從最左邊到這個動作的距離，每個動作建立座標； -->
<style>
.img1{
background:url("ZU.jpg") no-repeat scroll -30px 0 transparent;
width:151px;
height:205px;
}
.img2{
background:url("ZU.jpg") no-repeat scroll -188px 0 transparent;
width:151px;
height:205px;
}
.img3{
background:url("ZU.jpg") no-repeat scroll -332px 0 transparent;
width:151px;
height:205px;
}
.img4{
background:url("ZU.jpg") no-repeat scroll -473px 0 transparent;
width:124px;
height:205px;
}
.img5{
background:url("ZU.jpg") no-repeat scroll -588px 0 transparent;
width:145px;
height:205px;
}
</style>
</head>
<body>
<div id="red" class="img" style="position:absolute;left:0;top:0"></div>
<!-- //設置圖片的初始位置 -->
</body>
</html>
