自己写的一个banner动画

html

<div class="nav" >
  <div class="nav_son" id="nav">
  <div class="nav_cont img_1">
    <div class="nav_img "><img src="images/001_03.png" width="472" height="315" /></div>
  </div>
    <div class="nav_cont img_2">
      <div class="nav_img "><img src="images/001_05.png" width="450" height="315" /></div>
    </div>
    <div class="nav_cont img_3">
      <div class="nav_img"><img src="images/banner1_01.png" width="700" height="315" /></div>
    </div>
    <div class="nav_cont img_4">
      <div class="nav_img"><img src="images/nav005_03.png" width="700" height="315" /></div>
    </div>
  </div>
  <div class="nav_but">
      <ul class="nav_but_ul" id="butUl">
        <li class="check">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>
</div>

css

*{ margin:0; padding:0;}
ul ,li { list-style:none;}
.nav {
    height: 525px;
    width: 100%;
    position:relative;
    overflow:hidden;
    
}
.nav_cont {
    background-repeat: no-repeat;
    background-position: center top;
    position:absolute;
    top:0px;
    width:100%; height:100%;
    left:-100%;
}

.nav_son {width: 100%; height:100%; position:absolute;left:100%; }
.img_1 { background-image:url(images/003_006bg.jpg)}
.img_2 { background-image:url(images/003_005bg.jpg)}
.img_3 { background-image:url(images/banner1.jpg)}
.img_4 { background-image:url(images/nav005.jpg)}
.nav_img { position:absolute; left:50%; margin-left:-600px; }
.nav .nav_but {
    width: 100%;
    position: absolute;
    bottom: 10px;
    z-index:10;
}
.nav_but_ul { overflow:auto; width:120px; margin:0 auto;height: 20px;}
.nav_but_ul li { float:left; width:14px; height:14px; background:url(images/1CdeO2mZF63.PNG); text-indent:-9999px; cursor:pointer; margin-right:5px ;background-position:-14px  0px;}
.nav_but_ul li.check { background-position:0px  0px;}

js

var nav = document.getElementById("nav");
var list = document.querySelectorAll("#nav>div");
var nowNum = 0 ;
var start = 4 ;
var butList = document.querySelectorAll("#butUl>li");
var timer = null; 
window.onload = function (){
    list[nowNum].style.zIndex = 9 ;
    
    for (var i=0; i<butList.length;i++){
         butList[i].setAttribute("index",i);
        }
    isAddEvent(1);
    setTimeout(init,7000)
    } ;
function func (e){
    e = e || window.event ;
    if(e.target){ var  ele =  e.target}
    else if (e.srcElement){
        var  ele  =  e.srcElement
        }
    var num = parseInt( ele.getAttribute("index"));
    
    init(num);
    }
function init(num){
        if(num != null){
            goImg =num ;
            if (goImg == nowNum ){
            return ;
            }
        }
        else {
        goImg = nowNum+1 ; }
        if(goImg == 4){goImg= 0 ;}
        list[goImg].style.left = "0px";
        move(goImg);
        if(timer){clearTimeout(timer);timer = setTimeout(init,7000); }
        else {
            timer = setTimeout(init,7000);
            }
        
}

function  isAddEvent (isBut){
    
        for (var i=0; i<butList.length;i++){
        if(isBut){listenEvent(butList[i],"click",func);}
        else {stopListening(butList[i],"click",func);}
        }
    
}
    

function move (goImg){
    
    
    isAddEvent(0);
    this.goImg =  goImg;
    var sonImg = list[nowNum].getElementsByTagName("div")[0];
    var sonNowPos = GetCurrentStyle(sonImg,"left");
    var nex =  /%$/g ;
    var nowPosition = GetCurrentStyle(nav,"left");
    
    if(nex.test(sonNowPos)){
    sonNowPos = parseInt(sonNowPos)/100 * document.body.clientWidth;
    } else {  sonNowPos = parseInt(sonNowPos);}
    if(nex.test(nowPosition)){
    nowPosition =parseInt(nowPosition)/100 * document.body.clientWidth;
    } else {  nowPosition = parseInt(nowPosition);}
    //console.log(nowNum,goImg);
    var butList = document.querySelectorAll("#butUl>li");
    
    for (var i=0; i<butList.length;i++){butList[i].className = "" }
        butList[goImg].className = "check ";
    start*= 1.5 ;
    
    sonNowPos =Math.floor(sonNowPos-start);
    sonImg.style.left = sonNowPos+"px";
    time = setTimeout("move(this.goImg)",100);
    
    if(sonNowPos<300){
         
        nowPosition-=document.body.clientWidth/10;
        nav.style.left = nowPosition+"px";
        
        }
    console.log(nowPosition);
    if(nowPosition<=0){
        nav.style.left = "100%"
        sonImg.style.left = "50%";
        sonImg.removeAttribute("style");
        list[nowNum].style.zIndex = 0 ;
        list[nowNum].removeAttribute("style");
        list[goImg].removeAttribute("style");
        list[goImg].style.zIndex = 9 ;
        
        nowNum = goImg; 
        start=4;
        isAddEvent(1);
        clearTimeout(time);
        }
}

// 侦听
function listenEvent(eventTarget,eventType,eventHandler){
    if(eventTarget.addEventListener){
        eventTarget.addEventListener(eventType,eventHandler)
        }
    else if (eventTarget.attachEvent){
        eventType = "on" +eventType ;
        eventTarget.attachEvent(eventType,eventHandler)
        }
    else {
        eventTarget["on"+eventType]=eventHandler;
        }
    }
// 停止侦听
function stopListening(eventTarget,eventType,eventHandler){
    if(eventTarget.removeEventListener){
        eventTarget.removeEventListener(eventType,eventHandler);
        }
    else if (eventTarget.detachEvent){
        eventType = "on" +eventType ;
        eventTarget.detachEvent(eventType,eventHandler);
        }
    else {
        eventTarget["on"+eventType]=null;
        }
    }

//获得样式
function GetCurrentStyle (obj, prop)
   {
      if (obj.currentStyle) //IE
      {
          return obj.currentStyle[prop];
      }
      else if (window.getComputedStyle) //非IE
      {
          propprop = prop.replace (/([A-Z])/g, "-$1");
          propprop = prop.toLowerCase ();
          return document.defaultView.getComputedStyle(obj,null)[propprop];
      }
     return null;
   }
ps：可能有点小BUG，但是我目前看不出来哪里出问题了。求高手解决。