<>强效果图:
<强>代码如下:
& lt; html>
& lt; head>
& lt; style>
*{填充:0;保证金:0}
ul,李{list-style:没有}
.left{浮动:左}
铃声{浮动:左}
.page_container{高度:30 px;行高:30 px;宽度:510 px;溢出:隐藏;text-align:中心;填充:30 px 0;颜色:# 757575;}
.page_num_container{宽度:301 px;保证金:0 10 px;边界:1 px固体# ccc;边境:0;box-sizing: border-box;溢出:隐藏;位置:相对;高度:32 px;}
.page_num_container ul{位置:绝对;最高:0;}
李.page_num_container ul{浮动:左;宽度:30 px;边境:1 px固体# ccc; box-sizing: border-box; text-align:中心;游标:指针;}
.page_num_container ul李:徘徊。李page_num_container ul。活跃的{背景:# f4a100;颜色:# fff;}
.page_btn{宽度:60 px;边界:1 px固体# ccc; box-sizing: border-box;游标:指针;}
.page_btn:悬停{背景:# f4a100;颜色:# fff;}
.all_page:悬停{背景:没有,颜色:# 757575;}
.prev_btn {margin-right: 10 px;}
& lt;/style>
& lt;脚本src=" http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; !——页码——比;
& lt; div类=皃age_container中心”比;
& lt; div class=" page_btn prev_page左”的在上一页& lt;/div>
& lt; div类=" page_num_container左" id=皃age_num_container”比;
& lt; ul>
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt; li> 5 & lt;/li>
& lt; li> 6 & lt;/li>
& lt; li> 7 & lt;/li>
& lt; li> 8 & lt;/li>
& lt; li> 9 & lt;/li>
& lt; li> 10 & lt;/li>
& lt; li> 11 & lt;/li>
& lt; li> 12 & lt;/li>
& lt; li> 13 & lt;/li>
& lt; li> 14 & lt;/li>
& lt; li> 15 & lt;/li>
& lt; li> 16 & lt;/li>
& lt; li> 17 & lt;/li>
& lt; li> 18 & lt;/li>
& lt; li> 19 & lt;/li>
& lt; li> 20 & lt;/li>
& lt; li> 21 & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div class=" page_btn next_page左”在下一页& lt;/div>
& lt; div class=" page_btn all_page正确”的祝辞共21页& lt;/div>
& lt;/div>
& lt; !——页码——比;
& lt; script>
功能页面(){
var包含=$ (“.page_num_container”);
var ul=contain.children (“ul”);
李var=ul.children(“李”);
var长度=li.length;
var指数=0;
var leftIndex=0;
var prev_btn=contain.siblings (“.prev_page”);
var next_btn=contain.siblings (”。next_page”);
ul.css(“宽度”,li.outerWidth() *长度);
change_page(指数);
函数change_page (eqindex) {
如果(eqindex<0)
{
指数=0;
}
else if (eqindex>=长度){
指数=长度是1;
}
如果(index-4<=0) {
leftIndex=0;
}
else if (index> 10)
{
leftIndex=Math.ceil(长度/2);
}
其他{
leftIndex=index-4;
}
ul.animate({“左”:“——”+ leftIndex * li.outerWidth () +“px”}, 200);
li.eq(索引).addClass(“活跃”).siblings(李).removeClass(“活跃”);
}
prev_btn.click(函数(){
指数=索引1;
change_page(指数);
}）
next_btn.click(函数(){
指数=指数+ 1;
change_page(指数);
}）
li.click(函数(){
指数=$ ().index ();
change_page(指数);
}）
}
(页)
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
