原生js显示分页效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js分页</title>
<style type="text/css">
#pageNav { display: inline-block; }
#pageNav a { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #000; margin-right: 10px; text-decoration: none; background: #fff; }
#pageNav a.active, #pageNav a:hover { background: #2176FF; color: #fff; }
</style>
</head>
<body>
<div id="pageBox">
<div id="containet">
<ul id="pageMain">
<li>这是内容标题 第1条</li>
<li>这是内容标题 第2条</li>
<li>这是内容标题 第3条</li>
<li>这是内容标题 第4条</li>
<li>这是内容标题 第5条</li>
<li>这是内容标题 第6条</li>
</ul>
</div>
<span id="prev">上一页</span>
<ul id="pageNav"></ul>
<span id="next">下一页</span>
</div>
</body>
</html>
<script>
window.onload = function(){
tabPage({
pageMain : 'pageMain',
pageNav : 'pageNav',
pagePrev: 'prev',
pageNext: 'next',
curNum: 3, //每页显示的条数
activeClass: 'active', //高光显示的class
ini: 0 //初始化显示的页面
});
function tabPage(tabPage){
var pageMain = document.getElementById(tabPage.pageMain); //获取内容列表
var pageNav = document.getElementById(tabPage.pageNav); //获取分页
var pagePrev = document.getElementById(tabPage.pagePrev); //上一页
var pageNext = document.getElementById(tabPage.pageNext); //下一页
var curNum = tabPage.curNum; //每页显示数
var len = Math.ceil(pageMain.children.length / curNum); //计算总页数
var pageList = ''; //生成页码
var iNum = 0; //当前的索引值index
for(var i = 0; i < len; i++){
pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>';
}
pageNav.innerHTML = pageList;
pageNav.children[0].className = tabPage.activeClass; //头一页加高亮显示
for(var i = 0; i < pageNav.children.length; i++){
pageNav.children[i].index = i;
pageNav.children[i].onclick = function(){
for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; }
this.className = tabPage.activeClass; iNum = this.index; ini(iNum);
};
}
//下一页
pageNext.onclick = function(){
if(iNum == len - 1){ alert('已经是最后一页'); return false; }
else{
for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; }
iNum++;
pageNav.children[iNum].className = tabPage.activeClass;
ini(iNum);
}
};
//上一页
pagePrev.onclick = function(){
if(iNum == 0){ alert('当前是第一页'); return false; }
else{
for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; }
iNum--;
pageNav.children[iNum].className = tabPage.activeClass;
ini(iNum);
}
};
function ini(iNum){
for(var i = 0; i < pageMain.children.length; i++){ pageMain.children[i].style.display = 'none'; }
for(var i = 0; i < curNum; i++){
if(pageMain.children[(iNum * curNum + i)] == undefined){ continue; }
pageMain.children[(iNum * curNum + i)].style.display = 'block'; }
}
ini(iNum);
}
};
</script>
// <![CDATA[ window.onload = function(){ tabPage({ pageMain : 'pageMain', pageNav : 'pageNav', pagePrev: 'prev', pageNext: 'next', curNum: 3, //每页显示的条数 activeClass: 'active', //高光显示的class ini: 0 //初始化显示的页面 }); function tabPage(tabPage){ var pageMain = document.getElementById(tabPage.pageMain); //获取内容列表 var pageNav = document.getElementById(tabPage.pageNav); //获取分页 var pagePrev = document.getElementById(tabPage.pagePrev); //上一页 var pageNext = document.getElementById(tabPage.pageNext); //下一页 var curNum = tabPage.curNum; //每页显示数 var len = Math.ceil(pageMain.children.length / curNum); //计算总页数 var pageList = ''; //生成页码 var iNum = 0; //当前的索引值index for(var i = 0; i < len; i++){ pageList+='<a href="javascript:;">'+ ( i + 1)+'</a>'; } pageNav.innerHTML = pageList; pageNav.children[0].className = tabPage.activeClass; //头一页加高亮显示 for(var i = 0; i < pageNav.children.length; i++){ pageNav.children[i].index = i; pageNav.children[i].onclick = function(){ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } this.className = tabPage.activeClass; iNum = this.index; ini(iNum); }; } //下一页 pageNext.onclick = function(){ if(iNum == len - 1){ alert('已经是最后一页'); return false; }else{ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } iNum++; pageNav.children[iNum].className = tabPage.activeClass; ini(iNum); } }; //上一页 pagePrev.onclick = function(){ if(iNum == 0){ alert('当前是第一页'); return false; }else{ for(var t = 0; t < pageNav.children.length; t++){ pageNav.children[t].className = ''; } iNum--; pageNav.children[iNum].className = tabPage.activeClass; ini(iNum); } }; function ini(iNum){ for(var i = 0; i < pageMain.children.length; i++){ pageMain.children[i].style.display = 'none'; } for(var i = 0; i < curNum; i++){ if(pageMain.children[(iNum * curNum + i)] == undefined){ continue; } pageMain.children[(iNum * curNum + i)].style.display = 'block'; } } ini(iNum); } }; // ]]>
原生js显示分页效果的更多相关文章
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 原生js实现分页效果（带实例）
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 原生js实现的效果
原生js实现tooltip提示框的效果 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
随机推荐
- My集合框架第五弹 最小堆
二叉堆(以最小堆为例),其具有结构性质和堆序性质结构性质: 堆是一棵完全的二叉树,一颗高为h的完全二叉树有2^h到2^h-1个节点,高度为log N 而且该结构可以很容易的使用数 ...
- android 解释dp,px,pt,sp单位
1.dp(dip):不同设备有不同的显示效果,这个和设备硬件有关系,一般我们为了支持WVGA,HVGA和QVGA对剑使用这个,它是不依赖像素的 2.px:pixels(像素),不同设备显示效果相同,一 ...
- SVN安装与使用
来自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversion是优秀的版 ...
- jquery获取当前元素的坐标
jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或 var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...
- pycharm快捷键大全
Python IDE PyCharm的快捷键大全1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + S ...
- Java中移位操作运算符的理解
java中的移位运算符有三种: 1. <<: 左移 2. >>: 右移 3. >>>: 无符号右移 使用方法:左移就是将左边的操作数在内存中的二进制数据左移指 ...
- cocos2d-x 用浏览器打开网页
转自:http://www.xuebuyuan.com/1396292.html,http://www.cocoachina.com/bbs/read.php?tid=88589 First!! 源代 ...
- YOUYOU深入学习Ganglia之三（gmetad的软件架构）
Ganglia这个东西,目前的情况是测试的多,真正在数据中心部署过的人少:使用的多,真正能了解其代码架构的人少.这里根据我的经验,分解一下ganglia的gmetad的软件架构,欢迎大家交流. 上面的 ...
- SQL Server-删除表中重复的记录！
比如现在有一人员表 (表名:peosons)若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 select p1.* from persons p1,persons p ...
- BZOJ 1061: [Noi2008]志愿者招募 费用流
1061: [Noi2008]志愿者招募 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=1061 Description 申奥成功后,布布 ...