使用hammer.js实现移动端webAPP手势滑动切换页面

Hammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。

Hammer是一个轻量级的JavaScript库，它可以在不依赖任何其他东西的情况下识别触摸和鼠标事件。

因为项目需要研究了一下该插件，写了一个简单的页面切换的demo。第一次发博客，有点那啥哈。。。哈哈哈，不多说，上代码。

先到GitHub上下载hammer.js  导入相应的JS文件

导入对应的js文件。注：hammer是基于jQuery的，必须引入jQuery / zepto
<script src="jquery.min.js"></script>
<script src="hammer.js"></script>

html文件结构如下
<div id="container">
<div class="page pageNone"><a href="hammerTestPage2.html">111</a></div>
<div class="page pageNone">222</div>
<div class="page pageNone">333</div>
<div class="page pageNone">444</div>

<footer>
            <a class="tabbarItem tabbarOn">page1</a>
            <a class="tabbarItem">page2</a>
            <a class="tabbarItem">page3</a>
            <a class="tabbarItem">page4</a>
        </footer>
</div>

css文件
.pagePlay{
    display: block;
}
.pageNone{
    display: none;
}
.tabbarOn{
    color: #cc99cc;
}


#container,.page{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    overflow: hidden;
}
footer{
    position: fixed;
    bottom: 0;
}
footer a{
    display: inline-block;
    line-height: 3.6667rem;
}

JS 文件

function setSlide(elmId){
    //页面滑动切换
    var container = document.getElementById(elmId);
    var mc = new Hammer.Manager(container);
    var swipe = new Hammer.Swipe();
    mc.add(swipe);
    mc.on('swipeleft',function(e){
        if(slideCount == 4){
            return;
        }
        slideCount++;
        swipeTo("left");
    });
    mc.on('swiperight',function(e){
        if(slideCount == 1){
            //find the last page
            window.history.back(-1);
            return;
        }
        slideCount--;
        swipeTo("right");
    });
}


function swipeTo(slideType){
    var pageNum = "page"+slideCount;
    var page = $('.'+pageNum);
    page.addClass("pagePlay").removeClass("pageNone")
        .siblings(".pagePlay").addClass("pageNone").removeClass("pagePlay");

    $(".tabbarItem").eq(slideCount-1).addClass('tabbarOn').siblings(".tabbarOn").removeClass("tabbarOn");

}

到此一个简单的滑动切换页面就出来了，初次写，大牛勿喷啊！！！嘻嘻。。。