JS实现动态无缝轮播

在同学的帮助下，终于使用纯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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js动态无缝轮播 js无缝轮播 js动态轮播