小程序解决方法_JS完成动态无缝轮播

JS实现动态无缝轮播       这篇文章主要为大家详细介绍了JS实现动态无缝轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

先看布局代码

 div id="banner" 
 li img src="k1.jpg" /li 
 li img src="k-2.jpg" /li 
 li img src="k-3.jpg" /li 
 /ul 
 div /div 
 div /div 
 div /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 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. unction(){
 if(state){
 return;
 index=n;
 n--;
 if(n 0){
 n=li.length-1;
 li[n].style.left="-100%";
 showBtn(n);
 showImg(100);
 rightBtn. unction(){
 if(state){
 return;
 index=n;
 n++;
 if(n li.length-
 n=0;
 li[n].style.left="100%";
 showBtn(n);
 showImg(-100);
 var timer;
 timer=setInterval(autoLunbo,3000);
 function autoLunbo(){
 rightBtn.onclick();
 banner. unction(){
 clearInterval(timer);
 banner.onmouseout=function(){
 timer=setInterval(autoLunbo,3000);
}

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