原生JS实现动态轮播（一）无缝轮播

在同学的帮助下，终于使用纯js代码实现了动态轮播，好难啊呜呜呜！学无止境加油吧！

---

效果图是这样的，我们需要定义一个div，并放入三张图片，还需要左右两个按钮，以及底下三个按钮三个div。
先看布局代码

    <div  class="banner" id="banner">
       <ul class="clear" >
            <li style="left:0" ><img src="k1.jpg"></li>
            <li style="left:100%" ><img src="k-2.jpg"></li>
            <li style="left:100%"><img src="k-3.jpg"></li>
        </ul>
        <div class="pageNav"></div>
        <div class="leftBtn"></div>
        <div class="rightBtn"></div>
    </div>

如何是css部分

        .clear:after{
            display:block;
            content:"";
            clear:both;
        }
        .banner{
            width: 100%;
            position:relative;
            height: 390px;
        }
        .banner ul{
            width: 100%;
            height: 390px;
            list-style-type:none;
            overflow: hidden;
        }
        .banner ul li{
            width: 100%;
            position: absolute;
        }
        .pageNav{
            position: absolute;
            left:50%;
            bottom:20px;
            transform: translateX(-50%);
        }
        .pageNav a{
            display:inline-block;
            margin:0 5px;
            width: 20px;
            height: 20px;
            background-color:#fff;
            border-radius:50%;
            border:2px solid #000;
            cursor:pointer;
        }
        .pageNav a.cur{
            background-color:red;
        }
        .leftBtn, .rightBtn{
            position:absolute;
            top: 50%;
            transform:translateY(-50%);
            width: 40px;
            height: 50px;
            background-color:rgba(0, 0, 0, 0.5);
            cursor:pointer;
        }
        .leftBtn{
            left:0;
        }
        .rightBtn{
            right:0;
        }
        .leftBtn:hover,.rightBtn:hover{
            background-color:rgba(0, 0, 0, 0.8);
        }

接下来是js部分

var banner=document.getElementById("banner");
    var ul=banner.getElementsByTagName("ul")[0];
    var li=ul.getElementsByTagName("li");
    var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
    for(var i=0;i<li.length;i++){//给图片底下添加按钮
        pageA=document.createElement("a");
        if(i==0){
            pageA.className="cur";
        }
        pageNav.appendChild(pageA);
    }
    pageNav.addEventListener('click',pageNavClick,false);
    function pageNavClick(e){
        if(state){
            return;
        }
        e=e||window.event;//兼容性考虑
        for(var i=0;i<li.length;i++){
            if(pageNav.children[i]==e.target){
                index=n;
                var offset=i-n;
                n=i;
                showBtn(n);
                if(offset>0){
                    showImg(-100);
                }else{
                    showImg(100);
                }
            }
        }
    }
    function showBtn(index){
        for(var z=0;z<li.length;z++){
            pageNav.children[z].className="";
        }
        pageNav.children[index].className="cur";
    }
    function showImg(offset){
        clearInterval(timerElem);
        var speed=offset/20;
        timerElem=setInterval(function(){
            state=true;
            if(parseInt(li[n].style.left)==0){
                state=false;
                clearInterval(timerElem);
                li[n].style.left="0";
                for(var l=0;l<n;l++){
                    li[l].style.left="-100%"
                }
                for(var r=n+1;r<li.length;r++){
                    li[r].style.left="100%";
                }
            }else{
                li[n].style.left=parseInt(li[n].style.left)+speed+"%";
                li[index].style.left=parseInt(li[index].style.left)+speed+"%";
            }
        },100)
    }
    leftBtn.onclick=function(){
        if(state){
            return;
        }
        index=n;
        n--;
        if(n<0){
            n=li.length-1;
            li[n].style.left="-100%";
        }
        showBtn(n);
        showImg(100);
    }
    rightBtn.onclick=function(){
        if(state){
            return;
        }
        index=n;
        n++;
        if(n>li.length-
            1){
            n=0;
            li[n].style.left="100%";
        }
        showBtn(n);
        showImg(-100);
    }
    var timer;
    timer=setInterval(autoLunbo,3000);
    function autoLunbo(){
        rightBtn.onclick();
    }
    banner.onmouseover=function(){
        clearInterval(timer);
    }
    banner.onmouseout=function(){
        timer=setInterval(autoLunbo,3000);
    }