JS实现动态无缝轮播

前端  /  管理员 发布于 7年前   172

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

效果图是这样的，我们需要定义一个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;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 图片轮播(5张图片)
• js图片自动轮播代码分享(js图片轮播)
• 最简单的JavaScript图片轮播代码(两种方法)
• 原生js和jquery实现图片轮播特效
• JS实现简易图片轮播效果的方法
• js图片轮播效果实现代码
• 带左右箭头图片轮播的JS代码
• 原生js实现轮播图的示例代码
• js实现轮播图的完整代码
• js实现支持手机滑动切换的轮播图片效果实例