移动端轮播实现方法(dGun.js)

时间：2023-04-05 22:16:26 HTML5

本文介绍了移动端无缝轮播的原理。这个轮子比较简单，但是可以给刚入门的同学做个参考。最终效果是移动端无缝无限滑动，轮播速度可自定义。支持手势左右滑动。最后贴出源码。HTML部分

轮播的html是这样的，我们用css来看一下，再去css。Css部分*{保证金：0;填充：0；}ul{列表样式：无；}.outer{边距：0自动；宽度：100%；高度：150px；溢出：隐藏；位置：相对；}.inner{高度：150px；溢出：隐藏；宽度：8000px；}.inner.goIndex{浮动：左；高度：150px；背景重复：不重复；背景位置：中心中心；背景尺寸：封面；}。num{位置：绝对；左：0；右：0；底部：20%；显示：弹性；证明内容：居中；弹性方向：行；对齐项目：居中；}.numli{边距：03px;宽度：8px；高度：8px；边界半径：50%；背景：rgba(0,0,0,.2);}.numli.select{背景：rgba(0,0,0,.7);我们通过css可以看出.outer是最外层的外壳，多余的部分会被隐藏。.inner是一个很长的容器，item是单个的项目结构相对简单。ul是一个小控制点，但是移动端没有点击小点的功能。页面的Js部分//functiondGun(obj={})这是dGun.js的主要功能//初始化两个图片轮播dGun({id:"oneTest",time:10000});dGun({id:"twoTest",time:4000});//点击后跳转vargoList=document.getElementsByClassName("goIndex");for(vari=0;i300?时间：1000；//间隔必须大于300var_width=document.querySelector("#"+id).offsetWidth;//获取轮播宽度var_index=0;//当前第几个轮播从-1开始varinner=document.querySelector("#"+id+".inner");//获取轮播内容shell（很长的一个）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;变量米makeCir='';for(vari=0;i';}document.querySelector("#"+id+".num").innerHTML=makeCir;//设置轮播的宽度varnewItems=document.querySelectorAll("#"+id+".item");for(vari=0;i2){originX=parseInt(tempArr[tempArr.length-2])||0;}this.box.ontouchmove=function(ev){that.fnMove(ev)}this.box.ontouchend=function(ev){that.fnEnd(ev)}}};//Carousel手指移动Broadcast.prototype.fnMove=function(ev){ev.preventDefault();changedX=ev.touches[0].clientX-startX;varchangNum=(originX+changedX);this.box.style.cssText="transform:translateX("+changNum+"px);";};//CarouselfingerupBroadcast.prototype.fnEnd=function(ev){//移除底部按钮样式document.querySelector("#"+id+".select").classList.remove("select");基本键=1;setTimeout(function(){basKey=0;},300)if(changedX>=100){//向某个方向滑动var_end=(originX+_width);this.box.style.cssText="transform:translateX("+_end+"px);transition:all.3s";_指数-;if(_index==-1){//滑动到第一个，为了实现无缝，滚动到最后document.querySelectorAll("#"+id+".num>li")[imgLength-1].classList.add(“选择”);播放（-1）；}}elseif(changedX<-100){//向负方向滑动var_end=(originX-_width);this.box.style.cssText="transform:translateX("+_end+"px);transition:all.3s";_索引++；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;改变X=0；原点X=0；如果(_index!=-1&&_index!=imgLength){document.querySelectorAll("#"+id+".num>li")[_index].classList.add("select");}this.box.ontouchmove=null;//清除事件this.box.ontouchend=null;//清除绑定事件自动播放=setInterval(lunbo,time)//开启轮播}我们定义了Broadcast方法来监听用户的触摸屏按下事件。当手指按下时，我们记录下手指按下的X轴位置，然后监听移动和抬起事件手指移动时，我们要做的就是计算偏移量，通过抵消。当手指抬起时，我们检查偏移量是否大于100。这个值可以改变，也可以改变成一个参数。方向由正负判断，当前数由索引判断。如果它滑动到我们复制的第一个和最后一个节点，就会执行播放函数，我们接下来会解释。然后就是比较简单的改变控制点的样式，最后初始化值和清除监听事件。playfunction,fastscrolling//首尾无缝衔接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(",");如果(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!=-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){播放(imgLength);document.querySelectorAll("#"+id+".num>li")[0].classList.add("select");}}//初始轮播varautoPlay=setInterval(lunbo,time);//启动轮播var_广播=新广播（）；//instancetouchthis是启动一个定时器，在固定时间后偏移内部X，根据数字判断是否执行play函数https://github.com/Zhoujiando...源码在这里，大家可以看看，如果觉得有帮助请点个星，点奇数次。刚入行不久，有不顺眼的地方还请大家多多指教，谢谢。最后，提前祝大家新年快乐。

上一篇：写一个BUI折叠菜单插件

下一篇：Cross-domain-CORS

移动端轮播实现方法(dGun.js)相关文章