Home >Web Front-end >JS Tutorial >Yuansheng JS implements web page paging

Yuansheng JS implements web page paging

php中世界最好的语言Original: 2018-04-19 11:38:571630browse

This time I will bring you Yuansheng JS to realize web page paging. What are the precautions for Yuansheng JS to realize web page paging. The following is a practical case, let’s take a look.

<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>
  <scriptsrc="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 </head>
<body>
<!--页码-->
 <pclass="page_container center">
  <pclass="page_btn prev_page left">上一页</p>
  <pclass="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>
  <pclass="page_btn next_page left">下一页</p>
  <pclass="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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Yuansheng JS implements web page paging

Related articles