首先要说的是，这是一个伪翻页。原理是调用例如100个数据后，将其后面的内容做隐藏处理，在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。

引入jQuery

<script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script>

<script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script>

<script type="text/javascript">var jQuery = jQuery.noConflict();</script>

示例源码

<ul id="itemContainer">

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

翻页源码

<div class="holder"></div>

启动插件

jQuery(function() {

jQuery("div.holder").jPages({

containerID: "itemContainer",//父级定义的ID名

perPage:20,//该数字控制每页显示数量，想要显示几个就修改成数字几

previous: "上一页",

next: "下一页"

});

jQuery("div.holder").click(function(){

jQuery('body,html').animate({scrollTop:370},500);

return false;

});

});

这里需要注意的是：perPage:20，是每页显示的个数，也就是说<li>标签的总数，必须大于这里的20。