效果图
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"title>移动端幻灯片</link rel="stylesheet" href="slider.css"bodydiv class="slider" id="slider"> ="slider-item-container"> ="slider-item"> a href="#" class="slider-link"><img src="img/1.jpg"="slider-img"></adiv="img/2.jpg"="img/3.jpg"="img/4.jpg"="img/5.jpg"<!-- <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> --> > button id="prev">prevbutton="next">nextscript ="hammer.min.js"script="slider.js"> var slider=new Slider(document.getElementById("slider),{ initIndex:0,speed:300true }); prev.addEventListener(clickfunction(){ slider.prev(); },1)">false); next.addEventListener((){ slider.next(); },1)">); hammer Hammer(slider.getItemContainer()); isSwiping; //切换任意幻灯片 hammer.on(panmove(e){ distancee.deltaX+slider.getDistanceByIndex(slider.getIndex()); slider.move(distance); }); hammer.on(panendif(isSwiping) return;如果正在快速滑动,则不执行慢滑操作 slider.getDistanceByIndex(slider.getIndex()); indexgetIndexByDistance(distance); slider.to(index); }); 切换下一张 swipeleft(e){next isSwiping; slider.next((){ isSwiping; }); }); 切换上一张 swiperightprev ; slider.prev(; }); }); 根据容器的移动距离来获取索引 getIndexByDistance(distance){ (distance>){ return ; }else{ Math.round(-distance/slider.getDistancePerSlide()); } } html>
slider.css
/*css reset*/ *{margin:0;padding: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{100%;} .slider-item-container{display: flex;transition:transform 0;} .slider-item{flex-shrink:0;} .slider-link{ block;} .slider-indicator-container{ absolute;bottom:10px; center;} .slider-indicator{ inline-block;8px;border-radius: 50%;background-color: #000;opacity: 0.6;margin-right:8px;} .slider-indicator-active{ #007aff;1;}
slider.js
function Slider(el,options){ //默认参数 var defaults={ initIndex:0false }; 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-1this.index=this._adjustIndex(this.options.initIndex);当前索引值 移动幻灯片 this.move(this.getDistanceByIndex(.index)); 创建指示小圆点 if(.options.hasIndicator){ ._createIndicators(); this._setIndicatorActive(.index); } } 校正索引值 Slider.prototype._adjustIndex=(index){ if(index<.minIndex){ index=.minIndex; }else if(index>.maxIndex){ index=.maxIndex; } return index; } 移动幻灯片(不带动画) Slider.prototype.move=(distance){ this.itemContainer.style.transform="translate3d("+distance+"px,0)"; } 根据索引计算要移动的距离 Slider.prototype.getDistanceByIndex=return -index*.distancePerSlide; } 创建指示小圆点 Slider.prototype._createIndicators=(){ 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; .el.appendChild(indicatorContainer); } 当前小圆点高亮 Slider.prototype._setIndicatorActive=this.indicators=this.indicators || this.el.querySelectorAll(".slider-indicator"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=(speed){ this.itemContainer.style.transitionDuration=speed+"ms"切换幻灯片(带动画) Slider.prototype.to=(index,cb){ ._adjustIndex(index); this._setTransitionSpeed(.options.speed); var self=this.itemContainer.addEventListener("transitionend",(){ self._setTransitionSpeed(0); typeof cb==="function"){ cb(); } },); .options.hasIndicator){ .index); } } Slider.prototype.prev=(cb){ this.to(this.index-1this.index+1 将指定私有属性暴露出去 Slider.prototype.getItemContainer=return .itemContainer; } Slider.prototype.getIndex=.index; } Slider.prototype.getDistancePerSlide=.distancePerSlide; }
注意:pan 操作拖动事件,swipe 操作滑动事件