本文章介绍的是在陪玩游戏系统开发中，无缝隙轮播图实现的原理，最终需要实现的效果是在陪玩游戏系统中无缝隙无限滑动，可以自定义轮播的速度，支持手势左右滑动，带给用户更好的使用效果。HTML部分<divclass="outer"id="oneTest"><divclass="inner"><divclass="goIndexitem"goUrl="style="background-image:url(1.jpg)"></div><divclass="goIndexitem"goUrl="style="background-image:url(2.jpg)"></div><divclass="goIndexitem"goUrl="style="background-image:url(3.jpg)"></div></div><ulclass="num"></ul></div>陪玩游戏系统轮播图的html就是这样，我们配合着css来看，接下来上css。Css部分*{margin:0;padding:0;}ul{list-style:none;}.outer{margin:0auto;width:100%;height:150px;overflow:hidden;position:relative;}.inner{height:150px;overflow:hidden;width:8000px;}.inner.goIndex{float:left;height:150px;background-repeat:no-repeat;background-position:centercenter;background-size:cover;}.num{position:absolute;left:0;right:0;bottom:20%;display:flex;justify-content:center;flex-direction:row;align-items:center;}.numli{margin:03px;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.2);}.numli.select{background:rgba(0,0,0,.7);}我们通过css可以看到，.outer为最外层的壳，超出的部分都会隐藏，.inner为一个很长很长的容器，而item为单个item。结构比较简单。ul就是小的控制点了，但陪玩游戏系统没有点击小点的功能。页面中Js部分//functiondGun(obj={})这是dGun.js的主函数//初始化两个图片轮播dGun({id:"oneTest",time:10000});dGun({id:"twoTest",time:4000});//点击后跳转vargoList=document.getElementsByClassName("goIndex");for(vari=0;i<goList.length;i++){goList[i].addEventListener("click",function(){window.location=this.getAttribute("goUrl")})}dGun()就是初始化轮播图我们需要传入参数，第一个参数id为.outer盒子的id，第二个为自动切换时间。下面的是陪玩游戏系统中简单的点击跳转功能。dGun.js 初始化部分//functiondGun(obj={})包裹全部dGun内代码varid=obj.id;//获取domidvartime=obj.time?parseInt(obj.time):3000;//默认3stime=time>300?time:1000;//间隔必须大于300var_width=document.querySelector("#"+id).offsetWidth;//获取轮播图宽度var_index=0;//当前是第几个轮播从-1开始varinner=document.querySelector("#"+id+".inner");//获取轮播内容外壳（很长的那个）varitems=document.querySelectorAll("#"+id+".item");//获取轮播元素//将第一个元素复制到最后，将最后的元素复制到开头varfirstItem=items[0];varlastItem=items[items.length-1];inner.insertBefore(lastItem.cloneNode(true),firstItem);inner.appendChild(firstItem.cloneNode(true));inner.style.transform="translateX(-"+_width+"px)";//生成底部小圆点varimgLength=document.querySelector("#"+id+".inner").children.length-2;varmakeCir='<liclass="select"></li>';for(vari=0;i<imgLength-1;i++){makeCir+='<li></li>';}document.querySelector("#"+id+".num").innerHTML=makeCir;//设置轮播的宽度。varnewItems=document.querySelectorAll("#"+id+".item");for(vari=0;i<newItems.length;i++){newItems[i].style.width=_width+"px";}前几行代码就不多介绍了，就是获取dom，获取宽度。这里说一下将第一个元素复制到最后，将最后的元素复制到开头，这是陪玩游戏系统实现无缝隙轮播的关键，比如我们有3张图片1/2/3进行轮播，这样我们就需要将dom节点变为3/1/2/3/1，为什么这样做呢，轮播图原理是多个item并列，我们通过translateX进行值的改变显示不同区域，我们先将dom节点变为3/1/2/3/1，然后通过inner.style.transform = “translateX(-”+_width+“px)”;这句代码将初始化轮播显示区域放到1这个图片上。然后人们向右滑动，滑动到3的时候，再向右滑应该显示1，而我们dom节点中3的右边就是1，这样向右滑动到末尾1的时候我们快速通过translateX移动到开头1的位置来实现陪玩游戏系统的无缝隙轮播。手势滑动实现varstartX=0,changedX=0,originX=0,basKey=0;//手指点击的X位置滑动改变X的位置inner的translateX的值basKey是个钥匙functionBroadcast(){varthat=this;this.box=document.querySelector("#"+id+".inner");this.box.addEventListener("touchstart",function(ev){that.fnStart(ev);})}//轮播手指按下Broadcast.prototype.fnStart=function(ev){clearInterval(autoPlay);//手指按下的时候清除定时轮播if(!basKey){varthat=this;startX=ev.targetTouches[0].clientX;vartempArr=window.getComputedStyle(inner).transform.split(",");//获取当前偏移量if(tempArr.length>2){originX=parseInt(tempArr[tempArr.length-2])||0;}this.box.ontouchmove=function(ev){that.fnMove(ev)}this.box.ontouchend=function(ev){that.fnEnd(ev)}}};//轮播手指移动Broadcast.prototype.fnMove=function(ev){ev.preventDefault();changedX=ev.touches[0].clientX-startX;varchangNum=(originX+changedX);this.box.style.cssText="transform:translateX("+changNum+"px);";};//轮播手指抬起Broadcast.prototype.fnEnd=function(ev){//移除底部按钮样式document.querySelector("#"+id+".select").classList.remove("select");basKey=1;setTimeout(function(){basKey=0;},300)if(changedX>=100){//向某一方向滑动var_end=(originX+_width);this.box.style.cssText="transform:translateX("+_end+"px);transition:all.3s";_index–;if(_index==-1){//滑动到第一个了，为了实现无缝隙，滚到最后去document.querySelectorAll("#"+id+".num>li")[imgLength-1].classList.add("select");play(-1);}}elseif(changedX<-100){//向负的某一方向滑动var_end=(originX-_width);this.box.style.cssText="transform:translateX("+_end+"px);transition:all.3s";_index++;if(_index==imgLength){//滑到最后一个了，为了实现无缝隙，滚到前面去play(imgLength);document.querySelectorAll("#"+id+".num>li")[0].classList.add("select");}}else{//滑动距离太短，没吃饭不用管this.box.style.cssText="transform:translateX("+originX+"px);transition:all.3s";}//完成一次滑动初始化值startX=0;changedX=0;originX=0;if(_index!=-1&&_index!=imgLength){document.querySelectorAll("#"+id+".num>li")[_index].classList.add("select");}this.box.ontouchmove=null;//清除事件this.box.ontouchend=null;//清除绑定事件autoPlay=setInterval(lunbo,time)//开启轮播}我们定义Broadcast方法监听用户的触屏按下事件当手指按下时，我们记录手指按下的X轴位置，单后进行监听移动和抬起的事件。在陪玩游戏系统开发时，手指移动的时候我们要做到就是计算偏移量，并通过偏移量改变inner的位置。手指抬起时，我们查看偏移量十分大于100，这个值可以改，也可以改一下变成传参。通过正负判断方向，并通过index判断当前是第几个，如果是滑动到我们复制的第一个和最后一个节点，则执行play函数，我们接下来讲解。然后改变控制点样式就比较简单了，最后初始化值，并清除监听事件。play函数，快速滚//首尾无缝连接functionplay(index){setTimeout(function(){inner.style.transition='all0s';if(index==-1){var_number=-imgLength*_width;inner.style.transform='translateX('+_number+'px)';_index=imgLength-1;}elseif(index==imgLength){inner.style.transform='translateX(-'+_width+'px)';_index=0;}},250);}原理就是在图片滑动完成的时候，快速设置滑动变化时间设为0，并改变translateX到应该去的位置。陪玩游戏系统实现定时切换图片functionlunbo(){document.querySelector("#"+id+".select").classList.remove("select");vartempArr=window.getComputedStyle(inner).transform.split(",");if(tempArr.length>2){originX=parseInt(tempArr[tempArr.length-2])||0;}var_end=(originX-_width);inner.style.cssText="transform:translateX("+_end+"px);transition:all.3s";_index++;if(_index!=-1&&_index!=imgLength){document.querySelectorAll("#"+id+".num>li")[_index].classList.add("select");}elseif(_index==-1){document.querySelectorAll("#"+id+".num>li")[imgLength-1].classList.add("select");}elseif(_index==imgLength){play(imgLength);document.querySelectorAll("#"+id+".num>li")[0].classList.add("select");}}//初始化轮播varautoPlay=setInterval(lunbo,time);//开启轮播var_Broadcast=newBroadcast();//实例触摸这个就是开启个定时器，过固定的时间偏移inner的X，并根据是第几个来判断是否要执行play函数。以上就是“陪玩游戏系统开发，轮播图实现方法”的全部内容，希望对大家有帮助。本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理原文链接：