关于一个焦点图的问题，哪个大神给找出问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
}
ul{
width:1000%;
list-style:none;
}
#box{
width:490px;
height:170px;
border:1px solid #ccc;
margin:100px auto;
padding:5px;
position:relative;
}
#innerImg{
width:490px;
height:170px;
overflow:hidden;
}
li{
float:left;
}
#inner{
position:absolute;
right:15px;
bottom:13px;
}
span{
display:inline-block;
width:16px;
height:16px;
line-height:16px;
text-align:center;
cursor:pointer;
background:#fff;
margin:3px;
border:1px solid #ccc;
}
.carent{
background:#f80;
color:#fff;
}
</style>
<script>
window.onload = function(){
var btnArr = document.getElementsByTagName("span");
var box = document.getElementById("innerImg");
var ul = box.children[0];
var imgWidth = box.offsetWidth;
for(var i=0;i<btnArr.length;i++){
btnArr[i].index = i;
btnArr[i].onmouseover = function(){
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className ="carent";
animate(ul,this.index*imgWidth);
}
}
function animate(ele,target){
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var val = target-ele.offsetLeft;
var speed = val>0?10:-10;
ele.style.left = ele.offsetLeft+speed+"px";
if(Math.abs(val)<Math.abs(speed)){
ele.style.left = target+"px";
clearInterval(ele.timer);
}
},100);
}
}
</script>
</head>
<body>
<div id="box">
<div id="innerImg">
<ul>
<li><img src="/JS特效/img/01.jpg" alt="" /></li>
<li><img src="/JS特效/img/02.jpg" alt="" /></li>
<li><img src="/JS特效/img/03.jpg" alt="" /></li>
<li><img src="/JS特效/img/04.jpg" alt="" /></li>
<li><img src="/JS特效/img/05.jpg" alt="" /></li>
</ul>
<div id="inner">
<span class="carent">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
</body>
</html>
不知道问题出在哪里，图片不随着小下标而动，一直也不动
