如何使用js制作动态无缝轮播

如何使用js制作动态无缝轮播？其实很简单，首先，我们来看一下效果图：

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

一、HTML代码：

二、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;i0){          showImg(-100);        }else{          showImg(100);        }      }    }  }  function showBtn(index){    for(var z=0;zli.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);

看完上文之后是不是觉得特别简单呢？其实使用js制作动态无缝轮播并不是很难的，只要用心去看代码，你们也能轻松实现。资讯中还有很多关于JS制作的内容，如果想了解请关注其它相关文章！