js 简易的分页器插件
1.自己引入jquery插件，我的demo是引入的自己本地的query
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
li {
list-style: none;
}
div.main-wrap {
width: 1200px;
height: 800px;
position: relative;
margin: 0 auto;
}
div.main-wrap div.paging-content {
width: 100%;
}
div.main-wrap div.paging-content ul.pageItem {
width: 100%;
overflow: hidden;
display: none;
}
div.main-wrap div.paging-content ul.pageItem.active {
display: block;
}
div.main-wrap div.paging-content ul.pageItem li {
width: 200px;
height: 300px;
margin: 10px;
float: left;
background: yellowgreen;
border-radius: 8px;
cursor: pointer;
font-size: 50px;
color: #fff;
text-align: center;
line-height: 300px;
}
div.main-wrap div.paging {
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -200px;
height: 28px;
width: 400px;
}
div.main-wrap div.paging > span {
display: block;
width: 26px;
height: 26px;
border: 1px solid #999;
cursor: pointer;
float: left;
}
div.main-wrap div.paging span.prev {
margin-right: 4px;
background: url(../img/prevbtn.png) center no-repeat;
}
div.main-wrap div.paging span.next {
margin-left: 4px;
background: url(../img/nextbtn.png) center no-repeat;
}
div.main-wrap div.paging div.page-btn {
width: 180px;
height: 28px;
overflow: hidden;
float: left;
position: relative;
}
div.main-wrap div.paging div.page-btn ul {
width: 1000px;
height: 28px;
position: absolute;
left: 0;
top: 0;
}
div.main-wrap div.paging div.page-btn ul li {
float: left;
height: 26px;
line-height: 28px;
padding: 0 6px;
font-size: 20px;
color: #666;
cursor: pointer;
}
div.main-wrap div.paging div.page-btn ul li.active {
border-bottom: 2px solid #9ACD32;
} </style>
</head>
<body> <div class="main-wrap">
<div class="paging-content">
<ul class="pageItem paging1 active">
<li>1</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging2">
<li>2</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging3">
<li>3</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging4">
<li>4</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging5">
<li>5</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging6">
<li>6</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging7">
<li>7</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="pageItem paging8">
<li>8</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="paging">
<span class="prev"></span>
<div class="page-btn">
<ul class="btn-list">
<li class="active">2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<span class="next"></span>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function(){ createPage(".main-wrap",".pageItem",".prev",".next","div.page-btn",".btn-list","li",4).init();
/*
wrap:最外层的dom
pageItem:每页内容的wrap
prev：上一页的按钮
next：下一页的按钮
btnWrap:分页器的页数的外层dom,注意：这个dom不包含prev和next
btnBox：每个分页点的dom外层
btn:分页点的dom
showBtn：展示个数，默认为3个
* */ function createPage(wrap,pageItem,prev,next,btnWrap,btnBox,btn,showBtn){
var fn = {};
var $wrap =$(wrap),
$pageItem = $wrap.find(pageItem),
$prev = $wrap.find(prev),
$next = $wrap.find(next),
$btnWrap = $wrap.find(btnBox),
$btnList = $btnWrap.find(btn),
currActive = 0,
prevActive = 0,
maxLen = $pageItem.length,
showBtn = showBtn || 3,
btnWidth = $btnList.outerWidth(),
currLeft = 0;
fn.init = function(){
fn.Layer();
fn.prev();
fn.next();
fn.btn();
};
fn.Layer = function(){
$wrap.find(btnWrap).css("width",showBtn*btnWidth);
};
fn.prev = function(){
$prev.on("click",function(){
currActive--;
if(currActive < 0){
currActive = maxLen-1;
}
fn.changed(currActive);
});
}; fn.next = function(){
$next.on("click",function(){
currActive++;
if(currActive >= maxLen){
currActive = 0;
}
fn.changed(currActive); });
}; fn.changed = function(index){
if(prevActive > index){
fn.slideBtn(index-1);
}else{
fn.slideBtn(index);
}
$btnList.eq(index).addClass("active").siblings().removeClass("active");
$pageItem.eq(index).addClass("active").siblings().removeClass("active");
prevActive = index;
}; fn.btn = function(){
$btnWrap.on("click","li",function(){
currActive = $(this).index();
fn.changed(currActive);
});
}; fn.slideBtn = function(index){
currLeft = index;
if(index < showBtn-1 ){
currLeft = 0;
} if(maxLen-index < showBtn ){
currLeft = maxLen - showBtn;
}
$btnWrap.stop(true,true).animate({"left":currLeft*btnWidth*(-1)},500);
}; return fn;
} }); </script>
</html>
js 简易的分页器插件的更多相关文章
- web简易MP3播放插件 Aplayer篇章一
效果如图所示: 写入初始代码,定义一个id唯一的div player1 <!DOCTYPE html> <html> <head> <meta charset ...
- marked.js简易手册
marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...
- js简易日历
js简易日历中设计的知识点:选项卡切换 数组 innerHTML 连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- 原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
- JS与jquery书写插件规范
什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己 ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
随机推荐
- STM32解密STM32F103芯片解密STM32F103R6单片机破解多少钱？
STM32解密STM32F103芯片解密STM32F103R6单片机破解多少钱? STM32F系列单片机芯片解密型号: STM32F100 | STM32F101 | STM32F102 | ...
- python下编译py成pyc和pyo
python下编译py成pyc和pyo 其实很简单, 用 python -m py_compile file.py python -m py_compile /root/src/{file1,f ...
- SeekBar进度条简单案例
SeekBar是进度条.我们使用进度条时,可以使用系统默认的进度条:也可以自定义进度条的图片和滑块图片等 向右拉进度条让图片显示出来 向右拉五角星加载有色进度条 baseSeekBar package ...
- 破解压缩文件密码rarcrack
破解压缩文件密码rarcrack 常见的压缩文件格式有ZIP.RAR和7z.这三种格式都支持使用密码进行加密压缩.前面讲过破解ZIP压缩文件,可以使用fcrackzip.对于RAR和7z格式,可以 ...
- 【转】有关Oracle随机字符串的生成方法及具体应用
Oracle生成随机字符串的方法是通过dbms_random.string实现的. 1.dbms_random.string用法Oracle官方文档参考链接:http://download.oracl ...
- Bungee Jumping[HDU1155]
Bungee JumpingTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- word-wrap: break-word;和word-break: break-all;的区别
详细查看以下链接.(转载自张鑫旭大神空间) http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wra ...
- css 设置圆角
CSS3 圆角(border-radius) -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safar ...
- AD Local Domain groups, Global groups and Universal groups
http://ss64.com/nt/syntax-groups.html Rules that govern when a group can be added to another group ( ...