<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

* {

  padding: 0;

  margin: 0;

}

li {

  list-style: none;

}

div.paging {

  position: absolute;

  bottom: 50px;

  left: 50%;

  margin-left: -200px;

  height: 28px;

  width: 400px;

}

div.paging > span {

  display: block;

  width: 26px;

  height: 26px;

  border: 1px solid #999;

  cursor: pointer;

  float: left;

}

div.paging span.prev {

  margin-right: 4px;

  background: url(../img/prevbtn.png) center no-repeat;

}

div.paging span.next {

  margin-left: 4px;

  background: url(../img/nextbtn.png) center no-repeat;

}

div.paging div.page-btn {

  width: 180px;

  height: 28px;

  overflow: hidden;

  float: left;

  position: relative;

}

div.paging div.page-btn ul {

  width: 1000px;

  height: 28px;

  position: absolute;

  left: 0;

  top: 0;

}

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.paging div.page-btn ul li.active {

  border-bottom: 2px solid #9ACD32;

}

		</style>

	</head>

	<body>

		<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>

	</body>

	<script type="text/javascript" src="js/jquery.js" ></script>

	<script type="text/javascript">

		$(function(){

/*

   wrap:最外层的dom

   prev：上一页的按钮

   next：下一页的按钮

   btnWrap:分页器的页数的外层dom,注意：这个dom不包含prev和next

   btnBox：每个分页点的dom外层

   btn:分页点的dom

   showBtn：展示个数，默认为3个

 * */

createPage({

	wrap:'.paging',

	prev:'.prev',

	next:'.next',

	btnWrap:'.page-btn',

	btnBox:'.btn-list',

	btn:'li',

	showBtn:4,

	callback:function(num){

	 	console.log(num);

	}

});

function createPage(option){

   	  var fn  = {};

   	  var $wrap  =$(option.wrap),

   	     $prev = $wrap.find(option.prev),

   	     $next = $wrap.find(option.next),

   	     $btnWrap = $wrap.find(option.btnBox),

   	     $btnList = $btnWrap.find(option.btn),

   	     currActive = 0,

   	     prevActive = 0,

   	     maxLen = $btnList.length,

   	     showBtn = option.showBtn || 3,

   	     btnWidth = $btnList.outerWidth(),

   	     currLeft = 0;

 		//调节宽度

   	  	$wrap.find(option.btnWrap).css("width",showBtn*btnWidth);

   	 	//绑定上一个事件

   	  	$prev.on("click",function(){

  			currActive--;

  			if(currActive < 0){

  				currActive = maxLen-1;

  			}

  			fn.changed(currActive);

   	  	});

   	 //绑定下一个事件

   	  	$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");

   	  	if(option.callback){

   	  		option.callback($btnList.eq(index).html());

   	  	}

   	  	prevActive = index;

   	  };

		//项目绑定

   	  	$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分页器插件的更多相关文章

  1. 原生js分页器插件

    window.page = function page(ele, para) { this.ele = document.querySelector(ele); this.options = { co ...

  2. Sublime Text 2 JS 格式化插件 JsFormat的配置使用

    (转自http://www.jb51.net/softjc/178401.html) 这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下 ...

  3. Django 的css和js压缩插件：django_compressor

    今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: < ...

  4. knob.js进度插件

    关于knob.js进度插件的使用 关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1.  引入 head  部分添加knob.js,同时引 ...

  5. Sublime Text 2 JS 格式化插件 JsFormat

    这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...

  6. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  7. js开关插件使用

    一.简介 本篇文章介绍一个比较好使用的js开关插件Switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单.灵活,支持的绝大部分浏览器(Chrome, Firefox ...

  8. js写插件教程深入

    原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...

  9. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

随机推荐

  1. [No0000F6]C# 继承

    继承是面向对象程序设计中最重要的概念之一.继承允许我们根据一个类来定义另一个类,这使得创建和维护应用程序变得更容易.同时也有利于重用代码和节省开发时间. 当创建一个类时,程序员不需要完全重新编写新的数 ...

  2. Flannel配置详解

    1.简介 Flannel是一种基于overlay网络的跨主机容器网络解决方案,也就是将TCP数据包封装在另一种网络包里面进行路由转发和通信, Flannel是CoreOS开发,专门用于docker多机 ...

  3. 解决vshost32.exe已停止工作

    VS2015,搞二次开发遇到这个问题,这个真的很坑,都没法找到问题.然后百度到答案,将调试中的"启用Visual Studio 承载进程"的√去掉: 一开始感觉是内存的问题,后来又 ...

  4. 待选框、目标框select项目左右移动

    效果: 可以用一般的select multiple="multiple".自己写jq定义左移.右移.全部左移.全部右移.保存submit后端来操作select属性,方法参考html ...

  5. Apache Common Math Stat

    http://commons.apache.org/proper/commons-math/userguide/stat.html mark   DescriptiveStatistics maint ...

  6. hash_map

    点开一道第是自己oj的第440大关,想a了,一直想却无果,学长一句点醒,开始写hash. 关于这道题呢很无语了,两天卡在这上面,而且有些dalao不到20min就a了.我太菜了. 所以要深入讨论这道题 ...

  7. spring+shiro+springmvc+maven权限卡控示例

    项目结构 UserController , 主要负责用户登入和注销. LinewellController, 主要负责请求受权限卡控的数据. MyRealm,自定义realm. Authorizati ...

  8. struct和[]byte的转换，注意结构体内变量首字母一定大写

    type temp struct {     Afd int     Bee string }func main(){ text:=temp{3123,"4234"} b._:=j ...

  9. 重写toString()

    重写Object的toString()之前,得到的结果是  类型 @ 内存地址 demo: package cn.sasa.demo1; public class Test { public stat ...

  10. ef codefirst 模型字段类型与sqlserver表字段类型对应概要

    1.sqlserver中nvarchar(50),对应EF中: [MaxLength(, ErrorMessage = "最大长度为{1}")] public string Nam ...