jQuery客户端分页实例代码

前端技术 2023/09/07 JavaScript
复制代码 代码如下:

<script src=\"/js/jquery-1.4.1.js\" type=\"text/javascript\"></script>
   <script type=\"text/javascript\">
       var pageindex = 1;
       var pagesize = 2;
       $(function () {
           previous();
       })
       function previous() {
           if (pageindex < 1 || pageindex == 1) {
               pageindex = 1;
               $(\"#imgdiv img:lt(\" + pagesize + \")\").show();
               $(\"#imgdiv img\").not($(\"#imgdiv img:lt(\" + pagesize + \")\")).hide();
           }
           else {
               pageindex--;
               if (pageindex != 1) {
                   $(\"#imgdiv img:gt(\" + ((pageindex - 1) * pagesize - 1) + \"):lt(\" + pagesize + \")\").show();
                   $(\"#imgdiv img\").not($(\"#imgdiv img:gt(\" + ((pageindex - 1) * pagesize - 1) + \"):lt(\" + pagesize + \")\")).hide();
               }
               if (pageindex == 1) {
                   $(\"#imgdiv img:lt(\" + pagesize + \")\").show();
                   $(\"#imgdiv img\").not($(\"#imgdiv img:lt(\" + pagesize + \")\")).hide();
               }
           }
       }
       function next() {
           var p = $(\"#imgdiv img\").length / pagesize;

           var pagecount = parseInt(Math.ceil(p));

           if (pageindex + 1 > pagecount) {
               pageindex = pagecount;
           } else {
               pageindex++;
           }
           $(\"#imgdiv img:gt(\" + ((pageindex - 1) * pagesize - 1) + \"):lt(\" + pagesize + \")\").show();
           $(\"#imgdiv img\").not($(\"#imgdiv img:gt(\" + ((pageindex - 1) * pagesize - 1) + \"):lt(\" + pagesize + \")\")).hide();
       }
   </script>
<div>
       <a href=\"javascript:previous()\">上一页</a>
       <div id=\"imgdiv\">
           <img src=\"/images/001.jpg\" alt=\"第一页的第一张\"/>
           <img src=\"/images/002.jpg\" />
           <img src=\"/images/003.jpg\" />
           <img src=\"/images/004.jpg\" />
           <img src=\"/images/005.jpg\" /> 
       </div>
       <a href=\"javascript:next()\">下一页</a>
   </div>

本文地址:https://www.stayed.cn/item/19586

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。