首页 > > 网页制作 > css >

hammer.js实现移动端幻灯片

2020-03-15 16:03:47来源：博客园阅读 ()

hammer.js实现移动端幻灯片

效果图

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