<div class="nav" >

  <div class="nav_son" id="nav">

  <div class="nav_cont img_1">

    <div class="nav_img "><img src="data:images/001_03.png" width="" height="" /></div>

  </div>

    <div class="nav_cont img_2">

      <div class="nav_img "><img src="data:images/001_05.png" width="" height="" /></div>

    </div>

    <div class="nav_cont img_3">

      <div class="nav_img"><img src="data:images/banner1_01.png" width="" height="" /></div>

    </div>

    <div class="nav_cont img_4">

      <div class="nav_img"><img src="data:images/nav005_03.png" width="" height="" /></div>

    </div>

  </div>

  <div class="nav_but">

      <ul class="nav_but_ul" id="butUl">

        <li class="check"></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

  </div>

</div>

*{ margin:; padding:;}

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:;

}

.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;}

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，但是我目前看不出来哪里出问题了。求高手解决。