hammer.js實現移動端幻燈片

時間 2020-03-16

標籤 hammer.js hammer 實現移動幻燈片欄目 JavaScript 简体版

原文原文鏈接

效果圖css

index.htmlhtml

<!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.cssweb

/*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.jsapp

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;
}