SOURCE

 window.onload=function(){
        var oPrev=document.getElementById('prev'),
            oContainer=document.getElementById('parent'),
            oNext=document.getElementById('next'),
            oList=document.getElementById('oul'),
            oBtn=document.getElementById('ous').getElementsByTagName('li'),
            index= 1,//初始化按钮索引
            timer=null,//初始化计时器
            timers=null,//初始化计时器
            interval=3000;//设置自动轮播的的事件
        nowTime=+new Date();//初始化事件
        oNext.onclick=function(){
            animate(-1000);
        }
        oPrev.onclick=function(){
            animate(1000);
        }
        function showBtn(index){
            // console.log(oBtn);
            for (var i = 0; i < oBtn.length ; i++) {
                //小按钮对应当前图片
                if( oBtn[i].className == 'ls'){
                    oBtn[i].className = '';
                    break;
                }
            }
            oBtn[index-1].className = 'ls';
        }
        function animate(offset){
            //当重复点击时间间隔超过800m时，执行函数；
           // console.log(1)
            if(+new Date()- nowTime>800){
                var speed=0,//初始化速度
                    oLeft=parseInt(oList.style.left)+offset;
                //                debugger;
                if(offset<0){
                    if(index==5){
                        index=0;
                    }
                    index++;
                }else if(offset>0){
                    index--
                    if(index==0){
                        index=5
                    }
                }
                var runs=function(){
                    //                clearTimeout(timer);
                    speed=(oLeft-parseInt(oList.style.left))/10;//设置缓冲速度
                    speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
                    if(parseInt(oList.style.left)>oLeft||parseInt(oList.style.left)<oLeft){
                        oList.style.left=parseInt(oList.style.left)+speed+'px';
                        timer=setTimeout(runs,8)//当条件不允许的时候，重复调用
                    }else{
                        if(oLeft<-5000){
                            oList.style.left=offset+'px';
                        }
                        if(oLeft>-1000){
                            oList.style.left=-5*offset+'px';
                        }
                    }
                }
                runs();
                nowTime=new Date();
                showBtn(index);
            }
        }
        //点击按钮切换图片
        for (var i = 0; i < oBtn.length; i++) {
            oBtn[i].index=i;
            oBtn[i].onclick = function () {
                if(this.className == 'on') {
                    return;
                }
                var myIndex = this.index+1;
               // console.log(index);
                var offset = -1000 * (myIndex - index);
               // console.log(myIndex - index)
                animate(offset);
                index = myIndex;
                showBtn(index);
            }
        }
        oContainer.onmouseover = stop;
        oContainer.onmouseout = play;
        play();
        function play() {
            clearInterval(timers);//每次鼠标移开后，先清除定时器，重新开始计时，防止计时器的叠加！
            timers = setInterval(function () {
                oNext.onclick();
                play();
            }, interval);
        }
        function stop() {
            clearInterval(timers);
        }
    }

<div class='parent' id="parent">
    <ul class='oul' id='oul' style="left:-1000px">
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg"></li>
        <li><img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg"></li>
    </ul>
    <a id="prev" href="javascript:void(0)"></a>
    <a id="next" href="javascript:void(0)"></a>
    <ul class="us" id='ous'>
        <li class="ls"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
    </ul>
</div>

  */
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        body {
            background: black;
            color: white;
        }

        .parent {
            width: 1000px;
            height: 625px;
            /*border: 1px solid red;*/
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .oul {
            height: 625px;
            width: 7000px;
            position: absolute;
            top: 0;
        }

        .oul li {
            float: left;
            height: 100%;
            width: 1000px;
        }

        .oul li img {
            height: 100%;
            width: 100%;
        }

        #prev {
            width: 50px;
            height: 625px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            background: #000 url(http://www.zxhuan.com/wp-content/uploads/2016/02/left.png) no-repeat left center;
            transition: all 1s;
        }

        #prev:hover {
            background-color: #fff;
        }

        #next:hover {
            background-color: #fff;
        }

        #next {
            width: 50px;
            height: 625px;
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            background: #000 url(http://www.zxhuan.com/wp-content/uploads/2016/02/right.png) no-repeat right center;
            transition: all 1s;
        }

        ul.us {
            width: 200px;
            height: 20px;
            overflow: hidden;
            position: absolute;
            right: 60px;
            bottom: 10px;
        }

        ul.us li {
            width: 40px;
            text-align: center;
            height: 20px;
            display: block;
            float: left;
            border-radius: 50%;
            background: #F60;
            opacity: 0.6;
            transition: all 1s;
        }
        ul.us li a{
            text-decoration:none;
            color:white;
        }
        ul.us li.ls {
            background: #09F;
        }