原生js實現無縫滾動輪播圖

演示地址：http://runjs.cn/detail/qzawzm8y

前幾天參加了zuoyebang的面試，其中的一道面試題要求實現百度百科的輪播圖，今天有時間整理了一下輪播圖中的其中的一種，無縫滾動輪播圖，話不多說上代碼。

HTML:

 <div class="container" id="container">
        <div id="btn-prev" class="btn-ctrl">&lt;</div>
        <div id="btn-next" class="btn-ctrl">&gt;</div>
        <ul id="inner-list">
            <li><img src="images/head1.jpeg" alt=""/></li>
            <li><img src="images/head2.jpeg" alt=""/></li>
            <li><img src="images/head3.jpeg" alt=""/></li>
        </ul>
        <ul id="dot-list">
           
        </ul>
    </div>

CSS:

 *{margin: 0px;padding: 0px}
        #container{
            margin-left: 200px;
            width: 700px;
            height:700px;
            position: relative;
            overflow: hidden;
        }
        #inner-list{
            width: 400%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #inner-list li{
            float: left;
        }
        #dot-list{
            position: absolute;
            bottom:20px;
            right:20px;

        }
        #dot-list li{float: left;display: inline-block;
            width: 20px;height:20px;border-radius: 50%;line-height: 20px;text-align: center;
            background: rgba(255,255,255,.3);cursor: pointer;margin-right: 10px;
        }
        #dot-list li.cur{
            background: rgba(255,255,255,.6);
        }
        .btn-ctrl{
            position: absolute;cursor: pointer;
            top: 50%;
            font-size: 36px;
            color: red;
            font-weight: 500;z-index: 2;
        }
        #btn-prev{
            left: 0px;
        }
        #btn-next{
            right: 0px;
        }

JS:

window.onload = function(){
        var eleInners = document.getElementById('inner-list'),
            eleDots = document.getElementById('dot-list'),
                liImgs = eleInners.getElementsByTagName('li'),
                liDots = eleDots.children,
            elePrev = document.getElementById('btn-prev'),
            eleNext = document.getElementById('btn-next'),
            LI_WIDTH = liImgs[0].offsetWidth,
            TIME_DURATION = 3000,
            interval = null,
            index = 0,
            circle = 0;
             //首先是克隆
           eleInners.appendChild(liImgs[0].cloneNode(true));
            //生成小點點
        for(var i= 0,len = liImgs.length -1;i<len;i++){
            var li = document.createElement('li');
            li.innerHTML = i+1;
            eleDots.appendChild(li)
        }
        //第一個點高亮
        liDots[0].className = 'cur'
       //接着是動畫，用差值和offsetLeft值和移動的值，給一個speed讓它移動
        function animate(obj,targetPlace){
            clearInterval(obj.timer);
          obj.timer = setInterval(function(){
              //判斷移動的位置是向左移動還是向右移動
              var speed = obj.offsetLeft > targetPlace ? -15:15;
              var result = targetPlace - obj.offsetLeft;
              //只要移動的差值大於speed，那么就一直讓obj.style.left 改變
              if(Math.abs(result) > Math.abs(speed)){
                  obj.style.left = obj.offsetLeft + speed +'px'
              }else{
                  //否則如果已經移動的，obj.offsetleft與要移動的位置十分接近了，
                  obj.style.left = targetPlace+'px';
                  clearInterval(obj.timer);
              }
          },10)

        }

         //接着定時器
        interval = setInterval(autoplay,3000)

       //向左的autoplay
        function autoplay(){
            index++;
            if(index > liImgs.length -1){
                eleInners.style.left = 0;//趕快跳回去
                index = 1;//找到第二張圖片
            }
            animate(eleInners, -index * LI_WIDTH);
            circle++;

            if(circle >= liImgs.length -1){
                circle = 0;//circle回到第一個點
            }
            for(var i= 0,len = liDots.length;i<len;i++){
                liDots[i].className ='';

            }
            liDots[circle].className = 'cur'
        }
        //向右移動
        function moveright(){
            index--;
            if(index <0){
                eleInners.style.left = -(liImgs.length -2)* LI_WIDTH + 'px';
                index = liImgs.length -2;//找到倒數第二張圖片
            }
            animate(eleInners, -index * LI_WIDTH);
            circle --;
            if(circle < 0){
                circle = liImgs.length - 2;//circle回到最后一個點
            }
            for(var i= 0,len = liDots.length;i<len;i++){
                liDots[i].className ='';
            }
            liDots[circle].className = 'cur'
        }
//        鼠標移入，清除定時器
        eleInners.addEventListener('mouseenter',function(event){
           clearInterval(interval)
        });
        //        鼠標移出，開啟定時器
        eleInners.addEventListener('mouseleave',function(event){
            interval = setInterval(autoplay,3000)
        });
//        點擊dots
        eleDots.addEventListener('click',function(event){
            clearInterval(interval);
            var target = event.target;
            var currentTarget = event.currentTarget;
            index = target.innerHTML - 0 - 1;
            circle = index ;
            for(var i= 0,len = liDots.length;i<len;i++){
                liDots[i].className ='';
            }
            liDots[circle].className = 'cur'
            animate(eleInners, - index * LI_WIDTH);
        })

    elePrev.addEventListener('click',function(event){
        clearInterval(interval)
        moveright();
        interval = setInterval(autoplay,3000)
    })
   eleNext.addEventListener('click',function(event){
        clearInterval(interval)
        autoplay();
        interval = setInterval(autoplay,3000)
    })

 }