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