<!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显示分页效果的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  3. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  7. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  8. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  9. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

随机推荐

  1. Apache服务器配置默认首页文件名和网站路径

    默认首页的配置: 第一种:直接修改apache服务器的配置文件./conf/httpd.conf中的DirectoryIndex,如:(项目web以index.php为首页) <IfModule ...

  2. constraint使用方法总结

    主要就是添加约束的 下面几种约束 .并 一一列举: 1.主键约束: 要对一个列加主键约束的话,这列就必需要满足的条件就是分空 由于主键约束:就是对一个列进行了约束,约束为(非空.不反复) 下面是代码  ...

  3. Failed to load resource: net::ERR_CACHE_MISS

    Failed to load resource: net::ERR_CACHE_MISS 译为开发人员工具载入缓存的时候,说找不到资源. 原因是你先打开页面,然后打开chrome的开发人员工具.而页面 ...

  4. SMARTFORM报表程序设计(2)

    在创建并设置好STYLE程序之后,在SMARTFORM页面选择单选框FORM输入报表程序名称(ZS_SFLIGHT),点击CREATE按钮即可进入SMARTFORM BUILDER图形设置界面,SMA ...

  5. HDU 4941 Magical Forest 【离散化】【map】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4941 题目大意:给你10^5个点.每一个点有一个数值.点的xy坐标是0~10^9.点存在于矩阵中.然后 ...

  6. A. Fox and Box Accumulation

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  7. loading-show-hide

    https://github.com/eltld/loading-show-hide

  8. [Angular-Scaled Web] 7. Refactor code into Models

    In the previous code, both categories and bookmarks are binded to $rootscope, or let says the same s ...

  9. iOS开发——动画编程Swift篇&（五）CAKeyframeAnimation

    CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...

  10. c#使用MethodInvoker解决跨线程访问控件

      功能函数测试集锦(77)  C#专区(114)  版权声明:本文为博主原创文章,未经博主允许不得转载. .net 原则上禁止跨线程访问控件,因为这样可能造成错误的发生,有一种方法是禁止编译器对跨线 ...