移动WEB-使用hammer.js实现滑动门（carousel ）

1.首先需要引入jQuery文件和hammerJS的插件：

http://www.bootcdn.cn/jquery/

 

2.文档结构设计

    <div id="carousel">
        <ul>
            <li class="panel1">
                <h2>左滑下一页</h2>
            </li>

            <li class="panel2">
                <h2>向左拖拽也可以</h2>
            </li>

            <li class="panel3">
                <h2>右滑上一页</h2>
            </li>

            <li class="panel4">
                <h2>凑页数</h2>
            </li>
            <li class="panel5">
                <h2>再凑一页</h2>
            </li>
        </ul>
    </div>

3.样式设计：

    <style type="text/css">
        html,body,ul,li{
            padding: 0;
            margin: 0;
        }
        #carousel,#carousel ul,#carousel li{
            min-height: 400px;
            position: relative;
            overflow:hidden;
        }
        #carousel{
            background-color: silver;
            width:100%;
            -webkit-backface-visibility:hidden;
            -webkit-transform:translate3d(0,0,0) scale3d(1,1,1);
            -webkit-transform-style:preserve-3d;
        }
        #carousel ul.animate{
            -webkit-transition:all .3s;
        }
        #carousel ul{
            -webkit-transform:translate3d(0%,0,0) scale3d(1,1,1);
            -webkit-transform-style:preserve-3d;
            -webkit-backface-visibility:hidden;
            box-shadow: 0 0 20px rgba(0,0,0,2);
        }
        #carousel li{
            float: left;
            -webkit-transform-style:preserve-3d;
            -webkit-transform:translate3d(0,0,0);
        }
        #carousel li h2{
            color:#fff;
            font-size: 30px;
            text-align: center;
            position:absolute;
            top:40%;
            left:0;
            width:100%;
            text-shadow:-1px -1px 0 rgba(0,0,0,2);
        }
        #carousel li.panel1{background-color: #42d692;}
        #carousel li.panel2{background-color: #4986e7;}
        #carousel li.panel3{background-color: #d06b64;}
        #carousel li.panel4{background-color: #cd74e6;}
        #carousel li.panel5{background-color: #9fe1e7;}
    </style>

4.JS操作：

主要是通过监听手指移动的变化，包括drag,swipe和release的判断，再根据所在面板与面板总宽度的比值，对面板的位置属性进行改变。

    <script type="text/javascript">
        function Carousel(selector){
            var self=this,
                element=$(selector),
                container=$(">ul",element),
                panes=$(">ul>li",element),
                paneWidth=0,
                paneCount=panes.length,
                currentPane=0;

            this.init = function(){
                setPaneDimensions();
                $(window).on("load resize orientationchange",function(){
                    setPaneDimensions();
                })
            }

            function setPaneDimensions(){
                paneWidth=element.width();
                console.log(paneWidth);
                panes.each(function(){
                    $(this).width(paneWidth);
                })
                container.width(paneWidth*paneCount);
            }
            this.showPane=function(index){
                index=Math.max(0,Math.min(index,paneCount-1));
                currentPane=index;
                var offset=-((100/paneCount)*currentPane);
                setContainerOffset(offset,true);
            }
            function setContainerOffset(percent,animate){
                container.removeClass('animate');
                if(true){
                    container.addClass("animate")
                }
                container.css("transform","translate3d("+percent+"%,0,0) scale3d(1,1,1)")
            }
            this.next=function(){
                return this.showPane(currentPane+1,true);
            }
            this.prev=function(){
                return this.showPane(currentPane-1,true);
            }
            function handleHammer(e){
                e.gesture.preventDefault();
                switch (e.type){
                    case 'dragleft':
                    case 'dragright':
                        var paneOffset=-(100/paneCount)*currentPane;
                        var dragOffet=-(100/paneWidth)*e.gesture.deltaX/paneCount;
                        if((currentPane===0&&e.gesture.direction==='right')||(currentPane===paneCount-1&&e.gesture.direction==='left')){
                            dragOffet*=0.4;
                        }
                        setPaneDimensions(paneOffset+dragOffet);
                        break
                    case 'swipeleft':
                        self.next();
                        e.gesture.stopDetect()
                        break

                    case 'swiperight':
                        self.prev();
                        e.gesture.stopDetect()
                        break
                    case 'release':
                        if(Math.abs(e.gesture.deltaX)>paneWidth/2){
                            if(e.gesture.direction==='right'){
                                self.prev();
                            }
                            else{
                                self.next();
                            }
                        }
                        else{
                            self.showPane(currentPane,true)
                        }
                        break
                }
            }
            element.hammer({
                drag_lock_to_axis:true
            }).on("release dragleft dragright swipeleft swiperight",handleHammer)
        }
        var carousel=new Carousel("#carousel");
        carousel.init();
    </script>

 

转载于:https://www.cnblogs.com/YutaoZhou/p/6691750.html