jquery实现伪分页

最新推荐文章于 2020-12-19 11:00:22 发布

兰_1999

最新推荐文章于 2020-12-19 11:00:22 发布

阅读量378

点赞数 2

分类专栏：原创 jqurey 文章标签：前端 jquery 伪分页分页

本文链接：https://blog.youkuaiyun.com/weixin_43436925/article/details/89205532

版权

原创同时被 2 个专栏收录

14 篇文章

订阅专栏

jqurey

1 篇文章

订阅专栏

jquery实现伪分页效果图：

～～～全部代码及注释如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
       * {
           padding: 0;
           margin: 0;
           list-style: none;
       }
       .virtul_page{
           width: 1000px;
           margin: 0 auto;
           position: relative;
       }
       li {
           float: left;
           width: 460px;
           height: 280px;
           margin: 20px;
           background: pink;
           line-height: 280px;
           text-align: center;
           font-size: 70px;
           color: #fff;
       }
       .btn_box {
           position: absolute;
           top:640px;
           right: 50px;
       }
       .btn_box a {
           border: 1px solid #ccc;
           cursor: pointer;
           font-size: 14px;
           margin: 5px;
           padding: 5px;
           border-radius: 3px;
       }
       .page_box{
           font-size: 14px;
       }
   </style>
</head>

<body>
   <div class="virtul_page">
       <ul class="ul_box">
           <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>
           <li>22</li>
           <li>23</li>
           <li>24</li>
           <li>25</li>
           <li>26</li>
           <li>27</li>
           <li>28</li>
           <li>29</li>
       </ul>
       <span class="btn_box">
           <a class="prev">上一页</a>
           <span class="page_box">
               <span class="current_page">1</span>
               <span>/</span>
               <span class="total_page"></span>
           </span>
           <a class="next">下一页</a>
       </span>
   </div>
   　
   
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script>
   $(".ul_box li:gt(3)").hide();//  初始化，只显示前4个
   var li_length = $(".ul_box li").length;//获取li的个数
   var current_page = 1;
   var total_page = Math.ceil(li_length/4);//计算总的页数
   $(".total_page").text(total_page);//写入总页数
   $(".next").click(function(){
       if(current_page == total_page){
           return false;//最后一页时，禁止点击
       }else{
           $(".current_page").text(++current_page);//更改当前页
           $(".ul_box li").each(function(index,item){//遍历
               var start = (current_page-1) * 4;//计算更改当前页
               var end = (current_page * 4) - 1;//对应四个图片（li）的索引
               if(index >= start && index <= end){
                   $(this).show();//在索引范围内的显示
               }else{
                   $(this).hide();
               }
           })
       }
   })
   $(".prev").click(function(){
       if(current_page == 1){
           return false;
       }else{
           $(".current_page").text(--current_page);
           $(".ul_box li").each(function(index,item){
               var start = (current_page-1) * 4;
               var end = ((current_page) * 4) - 1;
               if(index >= start && index <= end){
                   $(this).show();
               }else{
                   $(this).hide();
               }
           })
       }
   })
   </script>
</body>

</html>