hammer.js实现移动端幻灯片
程序员文章站
2022-07-06 12:03:41
效果图 index.html
效果图
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 操作滑动事件
上一篇： nodejs 十六进制字符串型数据与btye型数据相互转换
下一篇： Cocos2d实现刮刮卡效果