想做成一行最多显示5条，大于5页显示..后跟总页数。点击总页数显示下5页
哪位高手帮忙看下啊
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="./jquery.easypage.js" charset="utf-8"></script> -->
<title>Title</title>
<style>
.pages {
margin: 30px auto 11px;
text-align: center;
font-size:0;
overflow: hidden;
zoom: 1;
}
.pages-cont
{
display: inline-block;
width: 100%;
height: 38px;
}
.pages-cont a{
padding: 1px 8px;
display: inline-block;
margin-left: 10px;
font-size: 14px;
border: 1px solid #dedede;
background: #fff;
color: #333;
text-decoration: none;
}
.pages-cont
.prev,.pages-cont
.next {
position: relative;
padding:1px;
width: 54px;
/*font-size: 12px;*/
text-align: center;
}
.pages-cont
.prev:hover {
color: #cf0000;
border: 1px solid #cf0000;
}
.pages-cont .prev {
/*color: #a0a0a0;*/
position: relative;
/*left: -5px;*/
}
.pages-cont .prev:hover,.pages-cont .next:hover {
text-decoration: none;
}
.pages-cont a:hover {
text-decoration: none;
color: #cf0000;
border: 1px solid #cf0000;
}
.pages-cont .active {
position: relative;
z-index: 1;
left: 0;
color: #fff;
border: 1px solid #cf0000;
background: #cf0000;
}
.pages-cont .active:hover {
color: #fff;
border: 1px solid #cf0000;
}
.pages-cont .result {
font-size:14px;
padding:0 15px;
/*padding-left: 15px;*/
}
.pages-cont .omit {
display: inline-block;
padding: 0 11px;
height: 34px;
line-height: 25px;
font-size:12px;
vertical-align:middle;
margin-right:-10px;
color: #666;
}
.pages-cont .disabled,.pages-cont .disabled:hover {
border: 1px solid #dedede;
color: #ccc;
cursor: not-allowed;
}
/* .pages-cont .txt {
margin: 0 4px 0 5px;
width: 34px;
text-align: center;
height: 32px;
line-height: 32px;
border: 1px solid #dedede;
}
.pages-cont .btn {
width: 50px;
height: 36px;
line-height: 36px;
background: #dedede;
border: none;
cursor: pointer;
text-align: center;
}
.pages-cont input {
vertical-align: middle;
}*/
</style>
<script>
;(
function($){
$.extend({
"easypage":function(options){
options = $.extend({//参数设置
contentclass:"contentlist",//要显示的内容的class
navigateid:"navigatediv",//导航按钮所在的dom的id
everycount:"5",//每页显示多少条内容
navigatecount:"5"//导航按钮一次显示多少个
},
options);
var currentpage = 0;//当前页
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pages-cont' class='pages-cont'><a href='javascript:void(0)' id='first'>首页</a><a href='javascript:void(0)' id='prev' class='prev'>上一页</a>";
for(var i = 1;i <= pagecount;i++){
navigatehtml+='<a href="javascript:void(0)" class="pagenavigate">'+i+'</a>';
}
navigatehtml+="<span class='omit'>...</span><a href='javascript:void(0)' class='result' id='result'>"+pagecount+"</a>";
// navigatehtml+="<a href='javascript:void(0)' class='next' id='next'>下一页</a><a class='last' id='last' href='javascript:void(0)'>尾页</a><span class='result' id='result'>共"+pagecount+"页</span></div>";
navigatehtml+="<a href='javascript:void(0)' class='next' id='next'>下一页</a><a class='last' id='last' href='javascript:void(0)'>尾页</a></div>";
//
//当页数小于或者等于5的时候隐藏 ...
if(pagecount<=options.everycount){
$('.omit').hide();
}else{
$('.omit').show();
}
//加载导航按钮
$("#"+options.navigateid).html(navigatehtml);
//得到所有按钮
var navigates = $(".pagenavigate");
//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
navigates.each(function(){
$(this).hide();
})
}
});
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount;
}
//点击最后一个或者总页数一次最多显示5，条隐藏上五条。当为最后一页时添加disabled为不可点击
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
}
});
//高亮显示某个按钮
$.extend({
"lightnavigate":function(currentnavigate){
currentnavigate.addClass("active");
}
});
//移除所有高亮按钮
$.extend({
"removelight":function(){
$(".active").each(
function(){
$(this).removeClass("active");
}
)
}
});
//显示某页的内容
$.extend({
"showPage":function(page){
contents.each(
function(contentindex){
if(contentindex>=page*options.everycount && contentindex < (page+1)*options.everycount){
$(this).show();
}else{
$(this).hide();
}
}
);
}
});
//隐藏前进后退按钮
$.extend({
"hidePreNext":function(page){
//当为尾页的时候
if(page==pagecount-1){
$("#next").addClass('disabled');
$("#last").addClass('disabled');
$("#prev").show();
$("#first").show();
}else if(page==0){ //当前在首页第一页的时候
$("#prev").addClass('disabled');
$("#first").addClass('disabled');
$("#next").removeClass('disabled');
$("#last").removeClass('disabled');
}else{
$("#first").removeClass('disabled');
$("#prev").removeClass('disabled');
$("#next").removeClass('disabled');
$("#last").removeClass('disabled');
}
}
});
//显示指定的导航按钮
$.shownavigate(0);
//隐藏所有的内容
$.showPage(0);
//开始时隐藏后退按钮
// $.hidePreNext(0);
//高亮显示第一个按钮
if(pagecount>0){
$.lightnavigate($(navigates.get(0)));
}
//点击导航按钮
$(".pagenavigate").each(
function(myindex){
$(this).click(
function(){
$.showPage(myindex);
$.removelight();
$.lightnavigate($(this));
currentpage = myindex;
$.hidePreNext(currentpage);
var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
$.shownavigate(na);
// alert(na)//0,0,0,0,5
}
);
}
);
//点击后退按钮
$("#prev").click(
function(){
--currentpage<=0 && (currentpage=0);
$.showPage(currentpage);
$.removelight();
$.lightnavigate($(navigates.get(currentpage)));
$.hidePreNext(currentpage);
var na = Math.floor(currentpage/options.navigatecount)*options.navigatecount;
$.shownavigate(na);
}
);
//点击前进按钮
$("#next").click(
function(){
++currentpage>=pagecount-1 && (currentpage=pagecount-1);
$.showPage(currentpage);
$.removelight();
$.lightnavigate($(navigates.get(currentpage)));
$.hidePreNext(currentpage);
var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
$.shownavigate(na);
}
);
//点击首页按钮
$("#first").click(
function(){
currentpage=0;
$.showPage(currentpage);
$.removelight();
$.lightnavigate($(navigates.get(currentpage)));
$.hidePreNext(currentpage);
var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
$.shownavigate(na);
}
);
//点击尾页按钮
$("#last").click(
function(){
currentpage=pagecount-1;
$.showPage(currentpage);
$.removelight();
$.lightnavigate($(navigates.get(currentpage)));
$.hidePreNext(currentpage);
var na = Math.floor((currentpage+1)/options.navigatecount)*options.navigatecount;
$.shownavigate(na);
}
);
}
});}
)(jQuery)
</script>
<script type="text/javascript">
//contentclass 要分页内容的class名称 默认的为contentlist
//navigateid 放置导航按钮的位置id 默认为mynavigate
//everycount 每页显示多少个
//navigatecount 导航按钮开始显示多少个，从第二个开始显示为双倍
$(function(){
$.easypage({'contentclass':'contentlist','navigateid':'pages','everycount':5,'navigatecount':5});
});
</script></head>
<body>
<div id="item-list">
<div class="contentlist">1.美国宣布新军事战略将重心转向亚太地区</div>
<div class="contentlist">2.春运期间极端最低温达零下5度</div>
<div class="contentlist">3.上海妇女社会地位调查结果公布</div>
<div class="contentlist">4.暖手袋发生漏液有危险 </div>
<div class="contentlist">5.上海相关调查称新车内挥发性有机物严重超标</div>
<div class="contentlist">6.申城进入流感高发期</div>
<div class="contentlist">7.上海仍有部分幼儿园开设各类收费兴趣班 家长支持</div>
<div class="contentlist">8.达人秀将揭晓复赛阵容 洗碗工麻袋姐走改编路线</div>
<div class="contentlist">9.苹果侵权中国作家立案 韩寒等9人索赔1200万元</div>
<div class="contentlist">10.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)</div>
<div class="contentlist">11.石岚二村小区高空抛物现象严重 多辆轿车被砸</div>
<div class="contentlist">12.女子从11家银行申领24张信用卡 透支本金45万</div>
<div class="contentlist">13.松江一家化工厂发生爆炸 一名技术工人当场死亡</div>
<div class="contentlist">14.UPS公司内鬼组团集体犯罪侵占公司运费980多万元</div>
<div class="contentlist">15.奔驰车胎漏气监测不报警</div>
<div class="contentlist">16.CBA-新疆新援能否战JR 连败北京遇强敌</div>
<div class="contentlist">17.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰</div>
<div class="contentlist">18.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型</div>
<div class="contentlist">19.曼奇尼笑迎孙继海 英主力紧拥</div>
<div class="contentlist">20.冬运花滑庞清佟健复出夺冠 </div>
<div class="contentlist">21.中国彩票年销2214亿涨33%</div>
<div class="contentlist">22.双色球26注530万分落14省市</div>
<div class="contentlist">23.安全是根本 自主品牌C-NCAP碰撞评说</div>
<div class="contentlist">24.赏豪车买车尽在车型总汇</div>
<div class="contentlist">25.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">26.微访谈：黄觉其实是个艺术家</div>
<div class="contentlist">27.杨澜访邓婕：当家庭主妇难</div>
<div class="contentlist">28.中学女生迎新“黑丝”上阵</div>
<div class="contentlist">29.陆空三军都干过的将军</div>
<div class="contentlist">30.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁</div>
<div class="contentlist">31.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他</div>
<div class="contentlist">32.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢 </div>
<div class="contentlist">33.纳什17助攻太阳大胜雄鹿</div>
<div class="contentlist">34.单节17分!非同级别较量 阿联渐入状态归队日子临近</div>
<div class="contentlist">35.状元秀21分骑士负开拓者</div>
<div class="contentlist">36.38岁纳什1战写65年纪录 10+17!最美就是这不老传奇</div>
<div class="contentlist">37.开拓者老大遭梦之队冷落 直言想打奥运哪怕选拔赛</div>
<div class="contentlist">38.雷霆大将右膝十字韧带撕裂 确定赛季报销择日手术</div>
<div class="contentlist">39.博格特周三回归对阵马刺 经纪人：感谢各方的支持</div>
<div class="contentlist">40.詹皇转变创造惊艳开局 哈队：谁能在内线防住他？</div>
<div class="contentlist">41.斯帅新赛季给波什两特权 龙王：当个组织者真难啊</div>
<div class="contentlist">42.连夜赶场累坏热火将士 詹姆斯：感觉像飞了趟中国</div>
<div class="contentlist">43.米勒打勇士复出？NO！再观察 斯帅：他还需要训练</div>
<div class="contentlist">44.热火迎赛季首次完整训练 斯帅惜时如金飞机上放录像</div>
<div class="contentlist">45.不再为忠诚or冠军挣扎 纳什：我愿在太阳到日落</div>
<div class="contentlist">46.石佛退居二线马刺愿供养 布莱尔:歇到季后赛再打</div>
<div class="contentlist">47.前蜂王欲组团买下母队 ：我识人懂商会十分完美</div>
<div class="contentlist">48.魔兽仅5分4板仍克国王 雷霆灭马刺背靠背靠背全胜</div>
<div class="contentlist">49.赏豪车买车尽在车型总汇</div>
<div class="contentlist">50.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">51.微访谈：黄觉其实是个艺术家</div>
<div class="contentlist">52.杨澜访邓婕：当家庭主妇难</div>
<div class="contentlist">48.魔兽仅5分4板仍克国王 雷霆灭马刺背靠背靠背全胜</div>
<div class="contentlist">49.赏豪车买车尽在车型总汇</div>
<div class="contentlist">50.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">51.微访谈：黄觉其实是个艺术家</div>
<div class="contentlist">52.杨澜访邓婕：当家庭主妇难</div>
<div class="contentlist">48.魔兽仅5分4板仍克国王 雷霆灭马刺背靠背靠背全胜</div>
<div class="contentlist">49.赏豪车买车尽在车型总汇</div>
<div class="contentlist">50.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">51.微访谈：黄觉其实是个艺术家</div>
<div class="contentlist">52.杨澜访邓婕：当家庭主妇难</div>
<div class="contentlist">53.中学女生迎新“黑丝”上阵</div>
<div class="contentlist">54.陆空三军都干过的将军</div>
<div class="contentlist">55.科比无敌1挑2!180度转体颜扣 103中51别再骂他打铁</div>
<div class="contentlist">56.2米13神塔玩出白巧绝技 湖人新体系?瞎子才忽视他</div>
<div class="contentlist">57.湖人22+15霸王8天后跌落人间 大梦鲨鱼附体?还早呢 </div>
<div class="contentlist">58.纳什17助攻太阳大胜雄鹿</div>
<div class="contentlist">59.单节17分!非同级别较量 阿联渐入状态归队日子临近</div>
<div class="contentlist">60.状元秀21分骑士负开拓者</div>
<div class="contentlist">61.嘉汇广场一商务楼外墙剥落砸伤过路男子(图)</div>
<div class="contentlist">62.石岚二村小区高空抛物现象严重 多辆轿车被砸</div>
<div class="contentlist">63.女子从11家银行申领24张信用卡 透支本金45万</div>
<div class="contentlist">64.松江一家化工厂发生爆炸 一名技术工人当场死亡</div>
<div class="contentlist">65.UPS公司内鬼组团集体犯罪侵占公司运费980多万元</div>
<div class="contentlist">66.奔驰车胎漏气监测不报警</div>
<div class="contentlist">67.CBA-新疆新援能否战JR 连败北京遇强敌</div>
<div class="contentlist">68.科比30+8湖人负开拓者 詹韦休战热火三加时胜老鹰</div>
<div class="contentlist">69.英媒惊曝曼联挖角兰帕德 小贝最新内裤广告超酷造型</div>
<div class="contentlist">70.曼奇尼笑迎孙继海 英主力紧拥</div>
<div class="contentlist">71.冬运花滑庞清佟健复出夺冠 </div>
<div class="contentlist">72.中国彩票年销2214亿涨33%</div>
<div class="contentlist">73.双色球26注530万分落14省市</div>
<div class="contentlist">74.安全是根本 自主品牌C-NCAP碰撞评说</div>
<div class="contentlist">75.赏豪车买车尽在车型总汇</div>
<div class="contentlist">76.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">73.双色球26注530万分落14省市</div>
<div class="contentlist">74.安全是根本 自主品牌C-NCAP碰撞评说</div>
<div class="contentlist">75.赏豪车买车尽在车型总汇</div>
<div class="contentlist">76.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">73.双色球26注530万分落14省市</div>
<div class="contentlist">74.安全是根本 自主品牌C-NCAP碰撞评说</div>
<div class="contentlist">75.赏豪车买车尽在车型总汇</div>
<div class="contentlist">76.蔡澜：风情万种的日本版朱茵</div>
<div class="contentlist">73.双色球26注530万分落14省市</div>
<div class="contentlist">74.安全是根本 自主品牌C-NCAP碰撞评说</div>
<div class="contentlist">75.赏豪车买车尽在车型总汇</div>
<div class="contentlist">76.蔡澜：风情万种的日本版朱茵</div>
</div>
<div id="pages" class="pages">
</div></body>
</html>`
你用的是插件吧！你这个插件没有相关文档嘛！看看文档呢