<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery分页显示插件</title>
<link href="Css/Css.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.7.2.min.js"></script>
<script src="script/jquery.Pages.js"></script>
<script>
$(function(){
$('.pagelist').Pages({
PagesClass:'.item', //需要分页的元素
PagesMth:4, //每页显示个数
PagesNavMth:5 //显示导航个数
});
$('.newslist').Pages({
PagesClass:'li', //需要分页的元素
PagesMth:5, //每页显示个数
PagesNavMth:5 //显示导航个数
});
});
</script>
</head>
<body>
<div class="wrap">
<h4>Demo1</h4>
<hr />
<div class="pagelist">
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="item"><img src="images/1.jpg" width="100" /></div>
<div class="item"><img src="images/2.jpg" width="100" /></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<h4>Demo2</h4>
<hr />
<div class="newslist">
<ul>
<li>
<div><a href="#">新闻标题标题1</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题2</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题3</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题4</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题5</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题6</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题7</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题8</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题9</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题10</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题11</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题12</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题13</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题14</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题15</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题16</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题17</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题18</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题19</a></div>
<span>2012/12/12</span> </li>
<li>
<div><a href="#">新闻标题标题20</a></div>
<span>2012/12/12</span> </li>
</ul>
</div>
<div class="clear"></div>
<h4>如何使用本插件</h4>
<hr />
<div class="yongfa">
<h6>1.添加分页导航css样式</h6>
.Pagination{float: right;height: 55px;_height: 45px; line-height: 20px;margin-right: 15px;_margin-right: 5px; color: <br />
#565656;margin-top: 10px;_margin-top: 20px; clear:both;}<br />
.Pagination span{margin-right: 5px;display: block;float: left;margin-left: 5px;}<br />
.Pagination span b{padding: 0 2px;}<br />
.Pagination div {float:left}<br />
.Pagination a{ font-size: 12px;text-decoration: none;display: block;float: left;color: #565656;border: 1px solid #cacaca;height: 20px;line-height: 20px;padding: 0 10px;margin: 0 2px;}<br />
.Pagination .Ellipsis {line-height: 32px;overflow: hidden; display:none;}<br />
cite.FormNum{display: block;float: left;line-height: 20px;height: 20px; font-style: normal; padding-left:10px;}<br />
#PageNum{ color:#777;width: 30px;height: 20px;line-height: 20px; border: 1px solid #cacaca; margin:0 5px; text-align:center;}<br />
.Pagination a:hover,.Pagination a.PageCur{background-color: #ee6600;border: 1px solid #d64c01;color: #ffffff; }<br />
<br />
<h6>1.引入本插件</h6>
<script src="Script/jquery.kkPages.js"></script><br />
<br />
<h6>3.调用方法</h6>
$('.newslist').kkPages({ <br />
PagesClass:'li', //需要分页的元素<br />
PagesMth:5, //每页显示个数 <br />
PagesNavMth:5 //显示导航个数<br />
});<br />
<br />
</div>
</div>
</body>
</html>
Jquery分页显示插件，可指定跳转页数
需积分: 9 186 浏览量
2022-10-21
15:58:59
上传
评论
收藏 80KB RAR 举报
Jquery分页显示插件.rar （11个子文件） 
Jquery分页显示插件 css 
Css.css 3KB images 
2.jpg 15KB 1.jpg 13KB
page_prev.gif 1KB page_next2.gif 1KB page_next_hover.gif 1KB Thumbs.db 23KB page_prev_hover.gif 1KB
index.html 7KB script jquery-1.7.2.min.js 93KB jquery.Pages.js 6KB
评论0