jQuery分页插件jPages，使用简单

jPages是一个客户端分页插件，它比其他大多数插件多了很多功能，比如自动翻页，滚动浏览，显示延迟，完全可定制的导航面板也集成项目与Animate.css和延迟加载。

兼容性：兼容所有的浏览器

使用方法

下面的代码添加到您的网页的部分：

<link rel="stylesheet" href="css/jPages.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="js/jPages.js"></script>

如果你想使用Animate.css动画你还需要添加的文件：

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

示例源代码：

<!-- Future navigation panel -->
 <div class="holder"></div>
 <!-- Item container (doesn't need to be an UL) -->
 <ul id="itemContainer">
 <!-- Items -->
     <li>...</li>
     <li>...</li>
     <li>...</li>
     <li>...</li>
     <li>...</li>
     ...
 </ul>

启动插件：

$(function(){
   $("div.holder").jPages({
     containerID : "itemContainer"
   });
 });

这是怎样的“div.holder”源代码将看起来像（创建10页）

!-- navigation panel -->
 <div class="holder">
     <a class="jp-previous jp-disabled">← previous</a>
     <a class="jp-current">1</a>
     <span class="jp-hidden">...</span>
     <a>2</a>
     <a>3</a>
     <a>4</a>
     <a>5</a>
     <a class="jp-hidden">6</a>
     <a class="jp-hidden">7</a>
     <a class="jp-hidden">8</a>
     <a class="jp-hidden">9</a>
     <span>...</span>
     <a>10</a>
     <a class="jp-next">next →</a>
 </div>

大功告成！