原生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的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
随机推荐
- F5 会话保持
1．什么是会话保持?在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中,一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成.由于这几次交互过程是密切相关的,服务器 ...
- lbs basic mongodb
MongoDB地理位置索引常用的有两种. db.places.ensureIndex({'coordinate':'2d'}) db.places.ensureIndex({'coordinate': ...
- [SQL]sql语句bug
sql语句格式必须严格检查,一个空格的错误都会导致执行错误. 常见有 1:字符串的值要用 ‘ ’ 括起来 2:用 , 分隔语句段 3:切记判断条件前有一空格:eg:这里最容易出错 4:属性名是否 ...
- [转]vector iterator not incrementable 的问题
转自:http://blog.csdn.net/kuaile123/article/details/11105115 vector::erase误使用问题: 暂时使用经验: 不能在循环中使用,否则会报 ...
- Centos下忘记mysql的root密码的解决方法
Centos下忘记mysql的root密码的解决方法 一:(停掉正在运行的mysql) [root@NetDakVPS ~]# service mysql stop 二:使用 “--skip-gran ...
- Ceph Jewel 10.2.3 环境部署
Ceph 测试环境部署 本文档内容概要 测试环境ceph集群部署规划 测试环境ceph集群部署过程及块设备使用流程 mon节点扩容及osd节点扩容方法 常见问题及解决方法 由于暂时没有用到对象存储,所 ...
- Android Studio @Bind的用法，自动生成findViewById无需再实例化控件
第一步:app 的build.gradle文件中添加 如下代码: compile 'com.jakewharton:butterknife:7.0.0' 点击Sync Now 同步下载第二步:安装插件 ...
- OBD Experts OBD II Software OBD II Protocol Stack
http://www.obdexperts.co.uk/stack.html OBD II Software OBD Experts can provide you with ready to use ...
- 广州项目实施步骤I_练习安装 CentOS x64 6.4
安装Centos x64 6.4 在家里使用 Vmware10.0.1进行模拟安装. 永久KEY注册密钥:5F29M-48312-8ZDF9-A8A5K-2AM0Z 下载地址:http://pan. ...
- 关于form.submit()不能提交表单的错误原因
来源:http://www.ido321.com/948.html 直接上代码把: 1: <div id="register"> 2: <h4>会员注冊&l ...