jQuery客戶端分頁實(shí)例代碼

更新時(shí)間：2013年11月18日 15:46:45 作者：

這篇文章主要介紹了jQuery客戶端分頁實(shí)例代碼，有需要的朋友可以參考一下

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

您可能感興趣的文章:

相關(guān)文章

jquery中選擇塊并改變屬性值的方法
本文為大家介紹下使用jquery改變class屬性的值，通過removeClass、addClass實(shí)現(xiàn)，具體如下，感興趣的朋友可以學(xué)習(xí)下
2013-07-07
jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果,實(shí)例分析了tytabs.jquery.min.js插件實(shí)現(xiàn)tab選項(xiàng)卡切換效果的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊撁嬖貥邮娇刂频南嚓P(guān)技巧,需要的朋友可以參考下
2015-07-07
jQuery 行級解析讀取XML文件（附源碼）
項(xiàng)目中應(yīng)用jQuery解析讀取XML語言配置文件來實(shí)現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。
2009-10-10
Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過展開效果
這篇文章主要介紹了Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過展開效果,需要的朋友可以參考下
2017-10-10
jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
牛叉的Jquery——Jquery與DOM對象的互相轉(zhuǎn)換及DOM的三種操作
Jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨(dú)有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨(dú)有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下
2015-10-10
jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼,基于jQuery鼠標(biāo)事件實(shí)現(xiàn)頁面元素屬性動(dòng)態(tài)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jquery新的綁定事件機(jī)制on方法的使用方法
這篇文章主要介紹了jQuery新的綁定事件機(jī)制on方法的使用方法,需要的朋友可以參考下
2014-04-04