滑动效果完全没有再次提问

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="css/slider.css">
<title>无标题文档</title>
</head>
 
<body>
<div id="slider" class="slider">
    <div class="slider-item-container">
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="img/1.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="img/2.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="img/3.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="img/4.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="img/5.jpg" alt="slider" 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="js/hammer.min.js"></script>
<script src="js/3slider-end.js"></script>
<script src="js/4tuodong.js"></script>
</body>
</html>

/*css reset*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
img {
    border: none;
    vertical-align: top;
}
a {
    -webkit-tap-highlight-color: transparent;
}
 
/*slider*/
.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 183px;
}
.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;
    background-color: #000;
    opacity: 0.2;
    border-radius: 50%;
    margin-right: 8px;
}
.slider-indicator-active {
    background-color: #007aff;
    opacity: 1;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

// JavaScript Document
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=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.options.initIndex;//如：这样写，当用户写的值为10，就会出错
    this.index=this._adjustIndex(this.options.initIndex);
     
    this.move(this.getDistanceByIndex(this.index));//调用移动函数移动幻灯片
    //为了在初始化时，将图片移动到对应的需要显示的图片位置，例如：初始传入index的值1， 那么打开页面默认显示就是第二张图片
     
    if(this,options.hasIndicator){//根据用户的需求判断是否创建指示器，并进行切换
        this._createIndicators();
        this._seteIndicatorActive(this.index);
    }
}
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'){//方便外面设置标识位，防止触摸事件2个都触发
            cb();
        }   
    },false);
    /*不设置self._setTransitionSpeed(0);时，slider-item-container上的transition-duration一直是300ms，导致你拖动图片时，图片并不是立即跟着鼠标进行移动，而是在300ms内慢慢的跟着鼠标移动。*/
    /*添加self._setTransitionSpeed(0);后，每次移动完一张图片，都会将transition-duration设置为0 ，那么在下一次拖动拖动图片时，会立即跟着鼠标进行移动，效果实现会更好。*/
     
    if(this.options.hasIndicator){
        this._seteIndicatorActive(this.index);   
    }
};
Slider.prototype._setTransitionSpeed=function(speed){//设置transition的速度
    this.itemContainer.style.transitionDuration=speed+'ms';
};
Slider.prototype.prev=function(cb){//上一张按钮点击执行的函数
    this.to(this.index-1,cb);
};
Slider.prototype.next=function(cb){//下一张按钮点击执行的函数
    this.to(this.index+1,cb);
};
//在左右切换过程中，调用的是to方法，而to方法内部调用了_setTransitionSpeed方法，所以会有动画效果
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(index){//创建小圆点，即指示器
    var indicatorContainer=document.createElement('div');
    var html="";
    indicatorContainer.className="slider-indicator-container";
    for(var i=0;i<this.maxIndex+1;i++){
        html+='<span class="slider-indicator"></span>';
    }
    indicatorContainer.innerHTML=html;
    this.el.appendChild(indicatorContainer);
};
Slider.prototype._seteIndicatorActive=function(index){//切换小圆点
    this.indicator=this.indicator||this.el.querySelectorAll('.slider-indicator');//短路操作符是为了防止每次触发_seteIndicatorActive都进行获取，浪费性能
    for(var i=0;i<this.indicator.length;i++){
        this.indicator[i].classList.remove('slider-indicator-active');
    }
    this.indicator[index].classList.add('slider-indicator-active');
};
Slider.prototype.getItemContainer=function(){//向外返回itemContainer
    return this.itemContainer;
};
Slider.prototype.getIndex=function(){//向外返回index
    return this.index;
};
Slider.prototype.getDistancePerSlide=function(){//向外返回distancePerSlide,即一张图片的宽度
    return this.distancePerSlide;
};
 
 
 
var slider=new Slider(document.getElementById('slider'),{
    initIndex:2,
    speed:300,
    hasIndicator:true
},false);
document.getElementById('prev').addEventListener("click",function(){
    slider.prev();
},false);
document.getElementById('next').addEventListener("click",function(){
    slider.next();
},false);

// JavaScript Document
var hammer=new Hammer(slider.getItemContainer());
 
var isSwiping=false;//防止手指滑动时，同时触发pan和swipe
 
hammer.on('panmove',function(event){
    var distance=event.deltaX+slider.getDistanceByIndex(slider.getIndex);
     
    slider.move(distance);
});
 
hammer.on('panend',function(event){
    if(isSwiping)return;
     
    var distance=event.deltaX+slider.getDistanceByIndex(slider.getIndex);
    var index=getIndexByDistance(distance);
     
    slider.to(index);
});
 
//根据容器的距离确定索引
function getIndexByDistance(distance){
    if(distance>0){
        return 0;
    }else{
        return Math.round(-distance/slider.getDistancePerSlide());//四舍五入确定索引值
    }
}
 
hammer.on('swipeleft',function(event){
    isSwiping=true;
     
    slider.next(function(){
        isSwiping=false;
    });
});
 
hammer.on('swiperight',function(event){
    isSwiping=true;
     
    slider.prev(function(){
        isSwiping=false;
    });
});