为什么我这个图片滚动会崩溃，帮帮忙啊

Question

 

var oBanner = document.getElementById('banner'),
 oDiv = oBanner.getElementsByTagName('div')[0],
 oUl = oBanner.getElementsByTagName('ul')[0],
 num = 0,
 timer = null;
 imgUrl = ["images/banner-pic1.png","images/japan/japan-banner.png","images/case/banner.png"];

 function load(){
  for(var i=0;i<imgUrl.length;i++){
   oDiv.innerHTML += "<a href='#'><img src='"+imgUrl[i]+"' alt='' /></a>";
   oUl.innerHTML += "<li></li>";
  }
 }

 function auto(){
  load();

  var aCir = oUl.getElementsByTagName('li'),
   aImg = oDiv.getElementsByTagName('a');
  aCir[num].style.background = "#1ab4c3";

  rank();

  timer = setInterval(abc,2000);

  oDiv.onmouseover = function(){
   clearInterval(timer);
  }

  oDiv.onmouseout = function(){
   timer = setInterval(abc,2000);
  }

  for(var i=0;i<aCir.length;i++){
   aCir[i].index = i;
   aCir[i].onmouseover = function(){
    clearInterval(timer);
    for(var j=0;j<aCir.length;j++){
     aCir[j].style.background = '#e5e5e5';
    }
    aCir[this.index].style.background = '#1ab4c3';
    rank();
    aImg[this.index].style.left = "0px";
   }
   aCir[i].onmouseout = function(){
    num = this.index;
    aImg[num].style.left = "0px";
    aImg[(num+1)%aImg.length].style.left = "1000px";
    timer = setInterval(abc,2000);
   }
  }

  function abc(){
   doMove(aImg[num%aImg.length],'left',100,-1000,function(){
    aImg[num%aImg.length].style.left = '1000px';
   });
   doMove(aImg[(num+1)%aImg.length],'left',100,0,function(){
    for(var i=0;i<aCir.length;i++){
     aCir[i].style.background = '#e5e5e5';
    }
    num++;
    num %= aImg.length;
    aCir[num%aImg.length].style.background = '#1ab4c3';
   });
  }

  function rank(){
   for(var i=0;i<imgUrl.length;i++){
    aImg[i].index = i;
    aImg[i].style.left = i*1000+'px';
    if(parseInt(getStyle(aImg[i],'left')) > '1000'){
     aImg[i].style.left = '1000px';
    }
   }
  }
 }

 auto();

function doMove(obj,arrt,dir,target,endFn){
 clearInterval(obj.timer);
 dir = parseInt(getStyle( obj,arrt )) > target ? -dir : dir;
 obj.timer = setInterval(function (){
  var speed = parseInt(getStyle( obj,arrt )) + dir ;
  if( speed > target&&dir > 0 || speed < target&&dir < 0 ){
   speed = target;
  }
  obj.style[arrt] = speed + 'px';
  if(speed === target){
   clearInterval(obj.timer);
   endFn&&endFn();
  }
 },50)
}

function changeOpacity(obj,dir,target,endFn){
 clearInterval(obj.opa);
 dir = parseFloat(getStyle( obj,'opacity' )) > target ? -dir : dir;
 obj.opa = setInterval(function (){
  var speed = parseFloat(getStyle( obj,'opacity' )) + dir ;
  if( speed > target&&dir > 0 || speed < target&&dir < 0 ){
   speed = target;
  }
  obj.style.opacity = speed;
  if(speed === target){
   clearInterval(obj.opa);
   endFn&&endFn();
  }
 },200)
}

function getShake(){
 var _this = this;
 shake( _this,'top' );
}

function shake(obj,arrt,endFn){
 clearInterval(obj.shake);
 var arr = [],
  num = 0;
  pos = parseInt(getStyle(obj,arrt));
 for(var i = 20;i>0;i-=2){
  arr.push(i,-i);
 }
 arr.push(0);
 if(obj.onOff){
  obj.onOff = false;
  obj.shake = setInterval(function(){
   obj.style[arrt] = pos + arr[num] + 'px';
   num++;
   if(num === arr.length){
    clearInterval(obj.shake);
    num = 0;
    obj.onOff = true;
    endFn&endFn();
   }
 },50)
 }
}

function toTwo(n){
 return n<10?"0"+n:""+n;
}

function getStyle(obj,attr){
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

<div class="banner" id="banner">

<div></div>

<ul></ul>

</div>

.banner {

width: 100%;

background: #e3ebee;

margin-bottom: 30px;

}

.banner>img {

display: block;

width: 1000px;

margin: 0 auto;

}

这两段是一起的，图片滚动几轮之后会崩溃，图片会乱飘。大神帮忙看看啊

Answer 1

结构代码呢。。。