Rumah > Artikel > hujung hadapan web > JavaScript实现分页效果的完整代码分享

JavaScript实现分页效果的完整代码分享

黄舟asal: 2017-03-28 14:10:371576semak imbas

本文主要介绍了JavaScript实现分页效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<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>

Atas ialah kandungan terperinci JavaScript实现分页效果的完整代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：详解使用JavaScriptCore实现OC和JS交互的示例代码Artikel seterusnya：JavaScript实现经纬度转换成地址功能的图文代码详解

Artikel berkaitan

Lihat lagi