jQuery全屏拖拽左右滑动效果

使用方法：

引入CSS样式文件

<link href="css/main.css" rel="stylesheet"/>

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/hammer.jquery.min.js"></script>
<script src="js/itemslide.min.js"></script>
<script src="js/sliding.js"></script>

HTML结构

<ul>
    <li>
        <div id="blackcover">
            <h1 style="color:#fff">请按住鼠标左键左右滑动，查看效果！</h1>	
            <h1 style="color:#fff">页面1</h1>					
        </div>
    </li>
    <li class="b2">
        <h1>页面2</h1>
        <p>一个页面对应一个li标签,请再用鼠标滑动</p>
    </li>
    <li class="b3">
        <h1>页面3</h1><br />
        <p>一个页面对应一个li标签,请再用鼠标滑动</p>
    </li>
</ul>

head区域引用以下代码

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">