hammer.js实现移动端幻灯片

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"title>移动端幻灯片</link rel="stylesheet" href="slider.css"bodydiv class="slider" id="slider">
        ="slider-item-container">
            ="slider-item">
                a href="#" class="slider-link"><img src="img/1.jpg"="slider-img"></adiv="img/2.jpg"="img/3.jpg"="img/4.jpg"="img/5.jpg"<!-- <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> -->
    >

    button id="prev">prevbutton="next">nextscript ="hammer.min.js"script="slider.js">
        var slider=new Slider(document.getElementById("slider),{
            initIndex:0,speed:300true
        });

        prev.addEventListener(clickfunction(){
            slider.prev();
        },1)">false);
        next.addEventListener((){
            slider.next();
        },1)">);

         hammer Hammer(slider.getItemContainer());
         isSwiping;
        //切换任意幻灯片
        hammer.on(panmove(e){
             distancee.deltaX+slider.getDistanceByIndex(slider.getIndex());
            slider.move(distance);
        });
        hammer.on(panendif(isSwiping) return;如果正在快速滑动,则不执行慢滑操作

            slider.getDistanceByIndex(slider.getIndex());
             indexgetIndexByDistance(distance);
            slider.to(index);
        });
        切换下一张
swipeleft(e){next
            isSwiping;
            slider.next((){
                isSwiping;
            });
        });
        切换上一张
swiperightprev
;
            slider.prev(;
            });
        });

        根据容器的移动距离来获取索引
         getIndexByDistance(distance){
            (distance>){
                return ;
            }else{
                 Math.round(-distance/slider.getDistancePerSlide());
            }
        }
    html>

slider.css

/*css reset*/
*{margin:0;padding: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{100%;}
.slider-item-container{display: flex;transition:transform 0;}
.slider-item{flex-shrink:0;}
.slider-link{ block;}
.slider-indicator-container{ absolute;bottom:10px; center;}
.slider-indicator{ inline-block;8px;border-radius: 50%;background-color: #000;opacity: 0.6;margin-right:8px;}
.slider-indicator-active{ #007aff;1;}

slider.js

function Slider(el,options){
    //默认参数
    var defaults={
        initIndex:0false
    };
    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-1this.index=this._adjustIndex(this.options.initIndex);当前索引值

    移动幻灯片
    this.move(this.getDistanceByIndex(.index));

    创建指示小圆点
    if(.options.hasIndicator){        
        ._createIndicators();
        this._setIndicatorActive(.index);
    }

}
校正索引值
Slider.prototype._adjustIndex=(index){
    if(index<.minIndex){
        index=.minIndex;
    }else if(index>.maxIndex){
        index=.maxIndex;
    }
    return index;
}
移动幻灯片(不带动画)
Slider.prototype.move=(distance){
    this.itemContainer.style.transform="translate3d("+distance+"px,0)";
}
根据索引计算要移动的距离
Slider.prototype.getDistanceByIndex=return -index*.distancePerSlide;
}
创建指示小圆点
Slider.prototype._createIndicators=(){
    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;
    .el.appendChild(indicatorContainer);
}
当前小圆点高亮
Slider.prototype._setIndicatorActive=this.indicators=this.indicators || this.el.querySelectorAll(".slider-indicator"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=(speed){
    this.itemContainer.style.transitionDuration=speed+"ms"切换幻灯片(带动画)
Slider.prototype.to=(index,cb){
    ._adjustIndex(index);
    this._setTransitionSpeed(.options.speed);
    var self=this.itemContainer.addEventListener("transitionend",(){
        self._setTransitionSpeed(0);

        typeof cb==="function"){
            cb();
        }
    },);

    .options.hasIndicator){
        .index);
    }
}
Slider.prototype.prev=(cb){
    this.to(this.index-1this.index+1 将指定私有属性暴露出去
Slider.prototype.getItemContainer=return .itemContainer;
}
Slider.prototype.getIndex=.index;
}
Slider.prototype.getDistancePerSlide=.distancePerSlide;
}

注意:pan 操作拖动事件,swipe 操作滑动事件

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码