<!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. ASP.NET MVC- ActionFilter的使用

    ActionFilter是穿插在Action执行过程,在Action执行前后提供扩展的功能.ActionFilter用途非常的广,用在页面压缩.缓存.错误处理,登陆验证. ActionFilter的实 ...

  2. POJ 1005(累加)

    /* * POJ_1005.cpp * * Created on: 2013年10月14日 * Author: Administrator */ #include <iostream> # ...

  3. 使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不 ...

  4. OC： NSString、NSArray、NSNumber

    数组参考: 参考1  参考2  参考3 //字符串 //1.获取字符串的长度: //表情符号最少占两个字节 NSString * s = @"中文字符串

  5. 为什么要尽量少使用iframe

    Iframes 阻塞页面加载 及时触发 window 的 onload 事件是非常重要的.onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕.当 onload 事件加载 ...

  6. CloudStack4.2 更新全局参数

    { "updateconfigurationresponse": { "configuration": { "category": &quo ...

  7. angularjs directive学习心得

    一些常见的错误 在angularjs里,创建directive时,directive的名称应该要使用驼峰式,例如myDirective,而在html里要调用它的时候,就不能用驼峰式了,可以用my-di ...

  8. Failure [INSTALL_FAILED_SHARED_USER_INCOMPATIBLE]

    在Android studio中想要运行程序,点击运行后程序安装失败,报出如下异常: 原因:在manifest中设置了 .android:sharedUserId="android.uid. ...

  9. Lockless Ring Buffer Design

    https://www.kernel.org/doc/Documentation/trace/ring-buffer-design.txt Lockless Ring Buffer Design == ...

  10. linux集群管理<转>

    云在根本上是由硬件和软件组成的,这些组件需要经常细心地维护.出现故障的硬件需要修理或更换:软件需要应用补丁.更新和升级:必须根据需求和潜在的安全威胁提前配置系统.应用程序开发人员可能觉得计算云很方便. ...