在前端页面开发过程中，页面中的轮播图特效很常见，因此我就想封装一个自己的原生JS的轮播图组件。之前自己写pc端的比较多，也没有用面向对象的方式来写，没写过移动端，因为要考虑很多，最近花了三天才完成了移动端轮播，都快写疯了。
主要的功能有：自动轮播，点击某一张图片对应的小圆点就跳转到指定图片，还可以自定义每张图轮播的延时，不过延时参数不是必须的参数，可以不指定延时，使用默认延时。
/** * Created by shentao on 2018/2/10. */ (function(){ //定义一个公共函数，方便获取dom元素 function $_(name){ return document.querySelectorAll(name); } var mslider=function(option){ //设置默认参数 this.defaultopt={ slideCell:".wrap", mainCell:".box", interTime:1000, autoPlay:false//自动播放 } //判断传入的opts是否有默认参数中的值，如果默认参数值不存在opts中 //就把默认参数加进opts中,这样就不会把默认参数修改了 option=option||this.defaultopt; for(var k in this.defaultopt){ if(!option[k]){ option[k]=this.defaultopt[k]; } } this.option=option; this.timer=null;//定义一个定时器变量 this.wrap=$_(this.option.slideCell)[0];//最外层容易，显示当前的图片 this.box=$_(this.option.mainCell)[0];//轮播图片的包裹层 this.ali=$_(this.option.mainCell+" li");//轮播图片集合 this.len=this.ali.length;//轮播图片的数目 this.aliWidth=parseInt(getComputedStyle(this.wrap).width);//每个图片的宽度 this.aliHeight=parseInt(getComputedStyle(this.ali[0]).height);//每个图片的告诉 this.iNow=0;//当前显示第几张图片 this.int();//执行初始化函数 } mslider.prototype={ constructor:mslider, int:function(){ var _this=this; this.createNode(); this.addEvent(); if(this.option.autoPlay==true){ this.timer=setInterval(_this.auto_play(),this.option.interTime) } this.create_page();//自动分页 }, //包裹曾头部尾部增加一个节点，方便实现无缝切换，做一些初始化样式设置 createNode:function(){ var _this=this; var nodeBefore=this.ali[0].cloneNode(true); var nodeAfter=this.ali[this.len-1].cloneNode(true); _this.box.appendChild(nodeBefore); _this.box.insertBefore(nodeAfter,this.ali[0]); this.newLen=$_(this.option.slideCell+" >ul li").length; this.box.style.cssText="width:"+this.newLen*this.aliWidth+"px;"+"position:absolute;"+" left:"+(-this.aliWidth)+"px"; this.wrap.style.cssText="height:"+this.aliHeight+"px"; for(var i=0;i<this.newLen;i++){ var oli=$_(this.option.mainCell)[0].children[i]; oli.style.cssText="float:left;"+"width:"+this.aliWidth+"px"; } }, //创建 create_page:function(){ var _this=this; //生成自动分页的导航 if(this.option. autoPage==true){ var ali=""; for(var i=0;i<this.len;i++){ ali+="<li>"+(i+1)+"</li>"; } var oul=$_(this.option.titCell)[0]; oul.innerHTML=ali; } this.tit=$_(this.option.titCell+" li"); this.tit[_this.iNow].className="on"; for(var i=0;i<this.tit.length;i++){ this.tit[i].pos=i; this.tit[i].onclick=function(){ clearInterval(_this.timer); var currNum=this.pos; var dir=currNum-_this.iNow; if(_this.state==true){ _this.handle(); } else{ _this.startOffset=_this.box.offsetLeft; } _this.animate(-_this.aliWidth*dir); _this.iNow=currNum; } } }, //处理动画没有结束滑动的bug handle:function(){ var _this=this; clearInterval(_this.transition); _this.endX=_this.endX<=-(_this.newLen-1)*_this.aliWidth?-(_this.aliWidth):_this.endX; _this.endX=_this.endX>=0?-(_this.newLen-2)*_this.aliWidth:_this.endX; _this.startOffset=_this.endX; } , //添加滑动事件 addEvent:function(){ var _this=this;var startX=0;this.startOffset=-_this.aliWidth;var movex=0;this.endX=0;this.state=false; _this.wrap.addEventListener("touchstart",start,false); _this.wrap.addEventListener("touchmove",move,false); _this.wrap.addEventListener("touchend",end,false); function start(e){ var e=e||window.event; clearInterval(_this.timer); if(_this.state==true){ _this.handle(); } else{ clearInterval(_this.transition); startX= e.touches[0].clientX; _this.startOffset=_this.box.offsetLeft; } } function move(e){ var e=e||window.event; _this.movex= e.touches[0].clientX-startX; _this.box.style.left=_this.startOffset+_this.movex+"px"; } function end(e){ var left = _this.box.offsetLeft; var currNum = left/_this.aliWidth; var pointX=left%_this.aliWidth; if(_this.movex<0){ if(Math.abs(_this.movex)<30){ _this.animate(0) } else{ _this.animate(-_this.aliWidth) } } else{ if(Math.abs(_this.movex)<30){ _this.animate(0) } else{ _this.animate(_this.aliWidth) } } } }, //封装一个动画函数 animate:function(offset){ var _this=this;var interval=10;_this.state=true;_this.endX=_this.startOffset+offset; var offsetX=(_this.endX-_this.startOffset)/this.aliWidth; _this.tit[_this.iNow].className=""; _this.iNow-=offsetX; _this.iNow=_this.iNow>=5?0:_this.iNow; _this.iNow=_this.iNow<0?4:_this.iNow; _this.tit[_this.iNow].className="on"; _this.transition=setInterval(move,10); function move(){ var speed=(_this.endX-_this.box.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(parseInt(_this.box.style.left)==-(_this.newLen-1)*_this.aliWidth){ _this.box.style.left=-(_this.aliWidth)+"px"; _this.endX=-(_this.aliWidth); } if(parseInt(_this.box.style.left)==0){ _this.box.style.left=-(_this.newLen-2)*_this.aliWidth+"px"; _this.endX=-(_this.newLen-2)*_this.aliWidth; } _this.box.style.left=_this.box.offsetLeft+speed+"px"; if(speed==0){ clearInterval(_this.transition); if(_this.option.autoPlay==true){ clearInterval(_this.timer); _this.timer=setInterval(_this.auto_play(),_this.option.interTime) } _this.box.style.left=_this.endX+"px"; _this.state=false; } } }, //设置自动播放 auto_play:function(){ var _this=this; return function(){ clearInterval(_this.timer); _this.startOffset=_this.box.offsetLeft; _this.animate(-_this.aliWidth); } } } window.mslider=mslider;//暴露给全局，方便调用 })();
下面是html结构
<div> <h2 class="title">手机端轮播实现</h2> <div class="wrap"> <ul class="clearfix box"> <li><img src="image/f1.jpg" alt=""></li> <li><img src="image/f2.jpg" alt=""></li> <li><img src="image/f3.jpg" alt=""></li> <li><img src="image/f4.jpg" alt=""></li> <li><img src="image/f5.jpg" alt=""></li> </ul> </div> <div class="hd"> <ul> </ul> </div> </div> <script> new mslider({ slideCell:".wrap", titCell:".hd ul", mainCell:".box", interTime:3000, autoPlay:false, //自动播放 autoPage:true,//自动分页 }); </script>
附上我的demo地址，http://xiabailu.top/mslider/，并没有css，我都写在了js里面，可以直接调用。