JQuery 分页实现
css:
.liList0 {
padding-left:5px;
}
.liList0 li {
width:160px;
float:left;
display:inline;
margin:5px
}
.liList0 li i {
display:block
}
.liList0 li i.iBtn {
padding:5px 0
}
html:
<div class="liList0" style="height:670px; overflow:hidden; width:700px;">
</div>
<div class="page"><a class="pageUp">上一页</a><a class="pageNext">下一页</a><a class="curpage"></a></div>
<div id="pageDiv">
<ul>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j02.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j02.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j03.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j03.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j01.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j04.jpg" width="160" height="295" /></i></li>
<li><i class="iPic"><img src="data:images/img_j04.jpg" width="160" height="295" /></i></li>
</ul>
</div>
js:
<script src="http://jquery-api-zh-cn.googlecode.com/svn/trunk/style/lib/jquery.js"></script>
var noPage = 8;
var num = Math.ceil($("#pageDiv ul li").size()/noPage);
for(i=0; i < num;i++){
var txt = $("#pageDiv").html();
$(".liList0").append(txt);
$(".liList0 ul").hide().eq(0).show();
$(".curpage").html("第1页")
}
$("#pageDiv ul").remove();
$(".liList0 ul").each(function(i){
$(".liList0 ul").eq(i).find("li").each(function(j){// 分页
if(!(j<(i+1)*noPage && j>=(i)*noPage)){
$(this).remove()
}
})
})
$(".liList0 ul").each(function(){
var k=0;
$(".pageNext").click(function(){
if(k < (num-1)){
$(".liList0 ul").eq(k).hide().next("ul").show();
k++;
$(".curpage").html("第"+(k+1)+"页")
}
})
$(".pageUp").click(function(){
if(k > 0){
$(".liList0 ul").eq(k).hide().prev("ul").show();
k--;
$(".curpage").html("第"+(k+1)+"页")
}
})
})
最新文章
- CSS 高级布局技巧
- CentOS 7如何连接无线网络
- Linux内核中大小端判定宏
- Auty自动化测试框架第七篇——添加动作库和常量文件库
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
- [原]Fedora Linux环境下的应用工具总结
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
- 【UVA1379】Pitcher Rotation (贪心+DP)
- java编程排错技巧
- 算法 - 乞讨n中位数(C++)
- 【论文速读】XiangBai_TIP2018_TextBoxes++_A Single-Shot Oriented Scene Text Detector
- 移动端目标识别(3)——使用TensorFlow Lite将tensorflow模型部署到移动端(ssd)之Running on mobile with TensorFlow Lite (写的很乱,回头更新一个简洁的版本)
- ajax 删除数据无刷新
- vmware vSphere 5.5的14个新功能
- html5-基本知识小结及补充
- 用mysql workbench导出mysql数据库关系图
- python第三十课--异常(with as操作)
- 008-插件方式启动web服务tomcat,jetty
- Caused by: java.lang.IllegalArgumentException: error at ::0 can&#39;t find referenced pointcut aaa
- 【题解】Willem, Chtholly and Seniorious Codeforces 896C ODT
热门文章
- iOS 极光推送
- WebSerivce测试工具 Storm
- 使用HttpClient进行http post/get方法的调用,以及使用dom4j解析xml
- SQL 获取 IDENTITY 三种方法 SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY的区别
- 两个select级联操作实例(教师职称类型与职称)
- [译]信仰是怎样毁掉程序猿的How religion destroys programmers
- How to save/read file on different platforms
- 【转】以XML文件方式保存用户数据&mdash;&mdash;2013-08-25 22
- linux服务器上
- Android(java)学习笔记209:采用get请求提交数据到服务器(qq登录案例)