<!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. Android性能测试－－内存

    前言: 近阶段都在探索android性能测试方面的东西,其中一个很重要的指标就是内存.对于内存,主要是一些gc是不是及时,或者说一些引用有没有及时释放,有没有导致oom或者内存持续增加导致卡顿,有没有 ...

  2. phpcms v9 的表单向导功能的使用方法 附多个案例

    本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...

  3. CodeForces - 748E (枚举+脑洞)

    E. Santa Claus and Tangerines time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  4. Latest China Scam: I've Been Arrested in the Brothel Crackdown!

    Latest China Scam: I've Been Arrested in the Brothel Crackdown! If the sex industry is fastest to se ...

  5. ASP.NET Core 2.0 Preview 1 中贴心的新特性

    西雅图时间5月10日,微软在 Build 2017 大会上发布了 ASP.NET Core 2.0 Preview 1 ( 详见 Announcing ASP.NET 2.0.0-Preview1 a ...

  6. ubuntu汉化

    寻找 Simplified Chinese,点击下面的apply 回到这里在最下面找到刚刚安装的语言,是灰色的,左键点击,将它拖到最上面,点击应用到整个系统,配置完成.重启系统就变成中文了. 晚上不要 ...

  7. MS14-064 漏洞测试入侵——20145301

    MS14-064 漏洞测试入侵 Microsoft Windows OLE远程代码执行漏洞,OLE(对象链接与嵌入)是一种允许应用程序共享数据和功能的技术 执行摘要 此安全更新可解决 Microsof ...

  8. jdbc ---- DBUTilDao 类

    1, 列用工具包  阿里的 DbUtils: JDBC Utility Component Examples 再次封装成通用的 update, query package com.ljs.dao; i ...

  9. [daily][centos][nginx] 在centos7使用nginx启用对文件目录的http访问

    1. 安装nginx yum install nginx 2. 修改配置 2.1 提供目录权限: 我需要访问的目录是 /home/data, 用户是data, 所以修改如下配置: [root@S205 ...

  10. LeetCode 500 Keyboard Row 解题报告

    题目要求 Given a List of words, return the words that can be typed using letters of alphabet on only one ...