jQuery支持mobile的全屏水平横向翻页效果

一款jQuery支持mobile的全屏水平横向翻页效果，可以点击左右的箭头来切换不同的页面内容，或者鼠标左键左右拖动来切换，支持移动端的触屏滑动的切换，切换内容可以时文字、图片、图文混排等等，没有上一页或下一页时，左箭头或右箭头会自动隐藏（压缩包内含左右箭头的PS文件）。

分类：选项卡/滑动门 > 选项卡切换难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，仅需引入页面的CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好左右箭头的div容器和4个section滑动内容，代码如下：

<div class="horizon-prev"><img src="images/l-arrow.png"></div>
<div class="horizon-next"><img src="images/r-arrow.png"></div>
<section data-role="section" id="section-section1">区块1</section>
<section data-role="section" id="section-section2">区块2</section>
<section data-role="section" id="section-section3">区块3</section>
<section data-role="section" id="section-section4">区块4</section>

页面的底部，需引入jQuery插件、触屏滑动插件、横向滚动插件，并启用插件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.js"></script>
<script type="text/javascript" src="js/jquery.horizonScroll.js"></script>
<script type="text/javascript">
$('section').horizon();
</script>