原生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);
    }