jQuery客戶端分頁實(shí)例代碼
更新時間:2013年11月18日 15:46:45 作者:
這篇文章主要介紹了jQuery客戶端分頁實(shí)例代碼,有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jquery分頁插件jpaginate在IE中不兼容問題
- jquery分頁對象使用示例
- 使用PHP+JQuery+Ajax分頁的實(shí)現(xiàn)
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
- jquery.pagination +JSON 動態(tài)無刷新分頁實(shí)現(xiàn)代碼
- 基于jquery封裝的一個js分頁
- jQuery中jqGrid分頁實(shí)現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- 用jQuery中的ajax分頁實(shí)現(xiàn)代碼
- 一款Jquery 分頁插件的改造方法(服務(wù)器端分頁)
- 基于Jquery實(shí)現(xiàn)表格動態(tài)分頁實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的表格分頁實(shí)現(xiàn)代碼
- 基于jQuery的實(shí)現(xiàn)簡單的分頁控件
- 基于JQuery的Pager分頁器實(shí)現(xiàn)代碼
- 基于jQuery的js分頁代碼
- jquery+ashx無刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁、排序、過濾功能)
- jquery+json實(shí)現(xiàn)的搜索加分頁效果
- php jquery 實(shí)現(xiàn)新聞標(biāo)簽分類與無刷新分頁
- jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- jQuery插件分享之分頁插件jqPagination
相關(guān)文章
jquery創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索實(shí)現(xiàn)思路
我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索這已經(jīng)成為了一種習(xí)慣今天給大家分享一下如何使用 jQuery,MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈2013-02-02jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)輪播圖相關(guān)資料,經(jīng)過一段時間學(xué)習(xí)jquery 的知識,這里寫一個簡單的輪播圖,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)的背景動態(tài)變化導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的背景動態(tài)變化導(dǎo)航菜單效果,涉及jquery頁面元素背景動態(tài)變換的實(shí)現(xiàn)技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-08-08jquery 文本上下無縫滾動,鼠標(biāo)放上去就停止 小例子
jquery 文本上下無縫滾動,鼠標(biāo)放上去就停止 小例子,需要的朋友可以參考一下2013-06-06純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單,實(shí)際主要是利用了css的li a屬性,對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08jQuery實(shí)現(xiàn)字符串按指定長度加入特定內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)字符串按指定長度加入特定內(nèi)容的方法,實(shí)例分析了jQuery操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03jQuery--遍歷操作實(shí)例小結(jié)【后代、同胞及過濾】
這篇文章主要介紹了jQuery 遍歷操作,結(jié)合實(shí)例形式詳細(xì)分析了jQuery針對后代、同胞及過濾遍歷的相關(guān)函數(shù)、操作技巧與使用注意事項,需要的朋友可以參考下2020-05-05