JavaScript实现分页效果

效果图：

代码如下：

超文本标记语言头部样式* { padding:0margin:0 } ul，li{list-style:none} .左侧{float:left} .右侧{float:left} .page _ container { height : 30px；线高： 30px宽度： 510像素；飞越：隐藏；文本对齐：中心；padd : 30px 0；color: # 757575}。page _ num _ container { width : 301 px；margin:0 10pxborder:1px固体# ccc右边框：0;盒子尺寸：边框盒子；飞越：隐藏；相对位置：高度：32px }。page _ num _ container ul { position :绝对值；top : 0；} .page _ num _ container ul li {左侧浮动：宽度： 30px右边框：1px实心# ccc盒子尺寸：边框盒子；文本对齐：中心；光标：指针；} .悬停在ul Li :上.页面编号容器ul Li。活动{后台： # F4 a 100；color: # fff}。page _ BTN { width : 60pxborder :1 px固体# ccc盒子尺寸：边框盒子；光标：指针；} .page _ BTN :悬停{背景： # F4 a 100；color: # fff}。all _ page :悬停{背景：无；color: # 757575}。prev _ BTN { margin-right : 10px；}/style脚本src=' http :http://cdn。bootscs。com/jquery/3。2 .1/jquery。量滴js '/脚本/head dy！-页码-div class=' page _ container center ' div class=' page _ BTN prev _ page left '上一页/div class=' page _ num _ container left ' id=' page _ num _ container ' ul li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li 10/Li Li 11/Li Li 12/Li Li 13/Li Li 14/Li Li 15/李丽丽16/李丽丽17/Li Li Li Li 18/Li Li Li Li 19/Li Li li20/Li li21/Li/ul/div class='下一页/div class=' page _ BTN all _ page right '共21页/div /div！-页码-脚本函数page(){ var contain=$(' .page _ num _ container’)；var ul=包含。儿童(' ul ')；var Li=ul。儿童('李')；可变长度=li.lengthvar索引=0;var left ndex=0；var prev_btn=包含。姐弟('。prev _ page’)；var next_btn=contain。姐弟('。next _ page’)；ul.css('width '，李。out width()* length)；change_page(索引);函数change _ page(equin dex){ if(equin dex 0){ index=0；} else if(equindex=length){ index=length-1；} if(index-4=0){ left ndex=0；} else if(索引长度-10){ left ndex=math。天花板(长度/2)；} else { left ndex=index-4；} ul。动画({ ' left ' : '-' left ndex * Li。outwidth()' px ' }，200)；li.eq(指数)。addClass('active ').弟妹（李)。移除CLaSS(' active ')；} BTN普雷沃。click(function(){ index=index-1；change_page(索引);})下一个_ BTN。click(function(){ index=index 1；change_page(索引);})李。click(function(){ index=$(this)).index()；change_page(索引);}) } page() /script /body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！