原生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的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
随机推荐
- Release 版本和 Debug 版本
什么是 Release 版本.Debug 版本? bug-缺陷,程序故障.而debug指的是排除缺陷,显然这个模式是面向开发者的. 而release是满足发布所用. Debug 和 Release,在 ...
- 在js中使用createElement创建HTML对象和元素
1.创建链接 <script language="javascript"> var o = document.body; //创建链接 function createA ...
- PING的原理以及ICMP协议
主要内容: 1.ping的原理以及工作过程 2.ICMP协议 3.ICMP的应用:ping,traceroute 1.ping的原理以及工作过程 ping的原理 ping 程序是用来探测主机到主机 ...
- jquery自定义方法
总结: * jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$ ...
- 异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- 使用 Protocol Buffers 代替 JSON 的五个原因
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Trapping Messages Sent to an Application
http://www.delphicorner.f9.co.uk/articles/apps7.htm Trapping Messages Sent to an Application I wrote ...
- C++学习笔记之友元
一.引言 C++控制对类对象私有部分(private)的访问,通常只能通过公有的(public)类方法去访问.但是有时候这种限制太严格,不适合特定的问题,于是C++提供了另外一种形式的访问权限:友元. ...
- 用iframe设置代理解决ajax跨域请求问题
面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...
- Ubuntu 14.04 Android 使用Maven二 创建自己的Mavenproject
依据https://code.google.com/p/maven-android-plugin/wiki/GettingStarted 介绍,有两种方法能够创建Mavenproject. 第一种方法 ...