效果图
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><button id="prev">prevbutton><button id="next">nextbutton><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+='';
}
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 操作滑动事件
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
