效果图
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <title>移动端幻灯片</title> <link rel="stylesheet" href="slider.css"> </head> <body> <div class="slider" id="slider"> <div class="slider-item-container"> <div class="slider-item"> <a href="#" class="slider-link"><img src="img/1.jpg" class="slider-img"></a> </div> <div class="slider-item"> <a href="#" class="slider-link"><img src="img/2.jpg" class="slider-img"></a> </div> <div class="slider-item"> <a href="#" class="slider-link"><img src="img/3.jpg" class="slider-img"></a> </div> <div class="slider-item"> <a href="#" class="slider-link"><img src="img/4.jpg" class="slider-img"></a> </div> <div class="slider-item"> <a href="#" class="slider-link"><img src="img/5.jpg" class="slider-img"></a> </div> </div> <!-- <div class="slider-indicator-container"> <span class="slider-indicator"></span> <span class="slider-indicator"></span> <span class="slider-indicator"></span> <span class="slider-indicator"></span> <span class="slider-indicator"></span> </div> --> </div> <button id="prev">prev</button> <button id="next">next</button> <script src="hammer.min.js"></script> <script src="slider.js"></script> <script> var slider=new Slider(document.getElementById("slider"),{ initIndex:0, speed:300, hasIndicator:true }); prev.addEventListener("click",function(){ slider.prev(); },false); next.addEventListener("click",function(){ slider.next(); },false); var hammer=new Hammer(slider.getItemContainer()); var isSwiping=false; //切换任意幻灯片 hammer.on("panmove",function(e){ var distance=e.deltaX+slider.getDistanceByIndex(slider.getIndex()); slider.move(distance); }); hammer.on("panend",function(e){ if(isSwiping) return;//如果正在快速滑动，则不执行慢滑操作 var distance=e.deltaX+slider.getDistanceByIndex(slider.getIndex()); var index=getIndexByDistance(distance); slider.to(index); }); //切换下一张 hammer.on("swipeleft",function(e){//next isSwiping=true; slider.next(function(){ isSwiping=false; }); }); //切换上一张 hammer.on("swiperight",function(e){//prev isSwiping=true; slider.prev(function(){ isSwiping=false; }); }); //根据容器的移动距离来获取索引 function getIndexByDistance(distance){ if(distance>0){ return 0; }else{ return Math.round(-distance/slider.getDistancePerSlide()); } } </script> </body> </html>
slider.css
/*css reset*/ *{margin:0;padding:0;box-sizing:border-box;} img{border:none;vertical-align: top;} a{-webkit-tap-highlight-color:transparent;text-align: center;} /*slider*/ .slider{width:100%;height:183px;position: relative;overflow:hidden;} .slider-item-container,.slider-item,.slider-link,.slider-img{width:100%;height:100%;} .slider-item-container{display: flex;transition:transform 0;} .slider-item{flex-shrink:0;} .slider-link{display: block;} .slider-indicator-container{position: absolute;bottom:10px;width:100%;text-align: center;} .slider-indicator{display: inline-block;width:8px;height:8px;border-radius: 50%;background-color: #000;opacity: 0.6;margin-right:8px;} .slider-indicator-active{background-color: #007aff;opacity:1;}
slider.js
function Slider(el,options){ //默认参数 var defaults={ initIndex:0, speed:300, hasIndicator:false }; this.options={}; this.options.initIndex=typeof options.initIndex!=="undefined"?options.initIndex:defaults.initIndex; this.options.speed=typeof options.speed!=="undefined"?options.speed:defaults.speed; this.options.hasIndicator=typeof options.hasIndicator!=="undefined"?options.hasIndicator:defaults.hasIndicator; this.el=el; this.itemContainer=this.el.querySelector(".slider-item-container"); this.items=this.itemContainer.children; this.distancePerSlide=this.items[0].offsetWidth;//每张幻灯片的宽度=每张移动的距离 this.minIndex=0; this.maxIndex=this.items.length-1; this.index=this._adjustIndex(this.options.initIndex);//当前索引值 //移动幻灯片 this.move(this.getDistanceByIndex(this.index)); //创建指示小圆点 if(this.options.hasIndicator){ this._createIndicators(); this._setIndicatorActive(this.index); } } //校正索引值 Slider.prototype._adjustIndex=function(index){ if(index<this.minIndex){ index=this.minIndex; }else if(index>this.maxIndex){ index=this.maxIndex; } return index; } //移动幻灯片（不带动画） Slider.prototype.move=function(distance){ this.itemContainer.style.transform="translate3d("+distance+"px,0,0)"; } //根据索引计算要移动的距离 Slider.prototype.getDistanceByIndex=function(index){ return -index*this.distancePerSlide; } //创建指示小圆点 Slider.prototype._createIndicators=function(){ var indicatorContainer=document.createElement("div"); indicatorContainer.className="slider-indicator-container"; var html=""; for(var i=0;i<=this.maxIndex;i++){ html+='<span class="slider-indicator"></span>'; } indicatorContainer.innerHTML=html; this.el.appendChild(indicatorContainer); } //当前小圆点高亮 Slider.prototype._setIndicatorActive=function(index){ this.indicators=this.indicators || this.el.querySelectorAll(".slider-indicator"); for(var i=0;i<this.indicators.length;i++){ this.indicators[i].classList.remove("slider-indicator-active"); } this.indicators[index].classList.add("slider-indicator-active"); } //设置动画速度 Slider.prototype._setTransitionSpeed=function(speed){ this.itemContainer.style.transitionDuration=speed+"ms"; } //切换幻灯片（带动画） Slider.prototype.to=function(index,cb){ this.index=this._adjustIndex(index); this._setTransitionSpeed(this.options.speed); this.move(this.getDistanceByIndex(this.index)); var self=this; this.itemContainer.addEventListener("transitionend",function(){ self._setTransitionSpeed(0); if(typeof cb==="function"){ cb(); } },false); if(this.options.hasIndicator){ this._setIndicatorActive(this.index); } } Slider.prototype.prev=function(cb){ this.to(this.index-1,cb); } Slider.prototype.next=function(cb){ this.to(this.index+1,cb); } // 将指定私有属性暴露出去 Slider.prototype.getItemContainer=function(){ return this.itemContainer; } Slider.prototype.getIndex=function(){ return this.index; } Slider.prototype.getDistancePerSlide=function(){ return this.distancePerSlide; }
注意：pan 操作拖动事件，swipe 操作滑动事件