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音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
随机推荐
- CozyRSS开发记录1-原型图与Grid
CozyRSS开发记录1-原型图与Grid 1.使用MockPlus画出最简陋的原型图 这个界面参考了目前我最常使用的RSS阅读-傲游浏览器的内置RSS阅读器.主体框架划分为上.左下.右下三块,分别是 ...
- java.lang.ClassNotFoundException: org.apache.catalina.startup.VersionLoggerListener
解决办法 找到Tomcat配置文件server.xml apache-tomcat-7.0.57/conf 将<Listener className="org.apache.cat ...
- python中threading的用法
摘自:http://blog.chinaunix.net/uid-27571599-id-3484048.html 以及:http://blog.chinaunix.net/uid-11131943- ...
- Python for Infomatics 第12章 网络编程二（译）
注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 12.3 用HTTP协议获取一张 ...
- android PreferenceFragment
初始化: public SettingPreferenceFragment() { } public void setArguments(Bundle bundle){ String targetId ...
- CSS生僻问题一网打尽
CSS生僻问题一网打尽 伪类和伪元素 伪类 何为伪类? 像类不是类,不是自己声明的类(不写样式也存在). 对伪元素的认识在早期网页上的超链接.链接(锚啊)用下划线标出来,点击后链接变紫色,鼠标悬上去变 ...
- Myeclipse使用DB Browser连接数据库错误：OPTION SQL_SELECT_LIMIT=DEFAULT
虽然使用Myeclipse,经过test driver可以使用, 但是不能够查询mysql数据库各个表的数据. 百度了下, 原来是驱动mysql的插件版本很低,重新下了个, 可以了. 下面是链接. ...
- 【转发】关于Java性能的9个谬论
转载请注明出处,感谢大家的支持!本文来自优优码:http://www.uucode.net/201502/9%e4%b8%aa%e8%b0%ac%e8%ae%ba Java的性能有某种黑魔法之称.部分 ...
- poj1323-Game Prediction(贪心思想)
贪心的思想:尽量的从最大值找起.然后在剩余之中,再从最大值找起. 一,题意: M个人,每人N张牌,每轮比较谁出的牌大,最大者为胜.现在给定M和N,以及你的牌,要求输出你至少能确保获得几轮的胜利 从&q ...
- p4lang/switch make bm-switchsai 出现内存不足导致的Error
报错如下: Compiling : bm::dc.cpp g++: internal compiler error: Killed (program cc1plus) Please submit a ...