Complete code sharing for JavaScript to achieve paging effect-JS Tutorial-php.cn

Complete code sharing for JavaScript to achieve paging effect

黄舟

Release： 2017-03-28 14:10:37

Original

1537 people have browsed it

This article mainly introduces JavaScriptan example of achieving pagination effect Code. It has a very good reference value. Let’s take a look at it with the editor

Rendering:

Complete code sharing for JavaScript to achieve paging effect

The code is as follows:

<html>
 <head>
  <style>
   *{padding:0;margin:0}
   ul,li{list-style:none}
   .left{float:left}
   .right{float:left}
   .page_container{height: 30px; line-height: 30px;width: 510px;overflow: hidden;text-align: center;padding: 30px 0;color: #757575;}
   .page_num_container{width: 301px;margin:0 10px;border:1px solid #ccc; border-right:0;
   box-sizing: border-box;overflow: hidden;position: relative;height: 32px;}
   .page_num_container ul{position: absolute;top: 0;}
   .page_num_container ul li{float: left;width: 30px;border-right:1px solid #ccc ;box-sizing: border-box;text-align: center;cursor: pointer;}
   .page_num_container ul li:hover,.page_num_container ul li.active{ background: #f4a100;color: #fff;}
   .page_btn{width: 60px;border:1px solid #ccc;box-sizing: border-box;cursor: pointer;}
   .page_btn:hover{ background: #f4a100;color: #fff;}
   .all_page:hover{background:none;color: #757575;}
   .prev_btn{margin-right: 10px;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 </head>
<body>
<!--页码-->
 <p class="page_container center">
  <p class="page_btn prev_page left">上一页</p>
  <p class="page_num_container left" id="page_num_container">
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</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</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  </ul>
  </p>
  <p class="page_btn next_page left">下一页</p>
  <p class="page_btn all_page right">共21页</p>
 </p>
 <!--页码-->
 <script>
  function page(){
  var contain=$(".page_num_container");
  var ul= contain.children("ul");
  var li = ul.children("li");
  var length= li.length;
  var index=0;
  var leftIndex=0;
  var prev_btn= contain.siblings(".prev_page");
  var next_btn= contain.siblings(".next_page ");
  ul.css("width",li.outerWidth()*length);
  change_page(index);
  function change_page(eqindex){
  if(eqindex<0 )
  {
  index=0;
  }
  else if(eqindex>=length ){
  index=length-1;
  }
  if(index-4<=0){
  leftIndex=0;
  }
  else if(index>length-10)
  {
  leftIndex=Math.ceil(length/2);
  }
  else{
  leftIndex=index-4;
  }
  ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
  li.eq(index).addClass("active").siblings(li).removeClass("active");
  }
  prev_btn.click(function(){
  index=index-1;
  change_page(index);
  })
  next_btn.click(function(){
  index=index+1;
  change_page(index);
  })
  li.click(function(){
  index=$(this).index();
  change_page(index);
  })
 }
 page()
  </script>
 </body>
</html>

Copy after login

The above is the detailed content of Complete code sharing for JavaScript to achieve paging effect. For more information, please follow other related articles on the PHP Chinese website!