<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.Nc_page{ 246px; height: 40px; margin: 30px 0 90px 112px; position: relative;}
.Nc_page_Ncon ul:after{ visibility: hidden; clear: both; display: block; height: 0px; content: ".";}
.Nc_page_Ncon{ 246px; height: 40px; position: relative; overflow: hidden;}
.Nc_page_Ncon ul{ 100%; height: 40px; position: absolute; left: 0;}
.Nc_page_Ncon span{font-size: 14px;line-height: 40px; padding-left: 4px;}
.Nc_page_Ncon ul li{ 40px; height: 40px; float: left; background-color: #d7dcde; text-align: center; position: relative; margin-right: 1px; cursor: pointer;}
.Nc_page_pre{ 40px; height: 40px; cursor: pointer; background-color: #d7dcde; text-align: center; position: absolute; left: -41px; top: 0px; margin-right: 1px; border-radius: 3px 0 0 3px;}
.Nc_page_pre:hover{background-color:#48af13; }
.Nc_page_next{ 40px; height: 40px; cursor: pointer; background-color: #d7dcde; text-align: center; position: absolute; right: -41px; top: 0px; margin-right: 1px; border-radius: 0 3px 3px 0 ;}
.Nc_page_next:hover{background-color:#48af13; }
.Nc_page_Ncon ul li a{ 40px; height: 40px; display: inline-block; font-size: 14px; color: #fff; line-height: 40px}
.Nc_page_all{ position: absolute; right: -135px;top: 0px; line-height: 40px;}
.Nc_page_Ncon ul li a:hover{background-color:#48af13; }
.Nc_page_Ncon ul li.pgActive{background-color:#48af13; }
.ArrowCL { 10px;height: 10px;border: 2px solid #fff;border-right: 0px solid #fff;border-top: 0px solid #fff;transform: rotate(45deg);position: absolute;top: 14px;right: 14px;z-index: 2;}
.ArrowCR { 10px;height: 10px;border: 2px solid #fff;border-left: 0px solid #fff;border-bottom: 0px solid #fff;transform: rotate(45deg);position: absolute;top: 14px;right: 14px;z-index: 2;}
</style>
</head>
<body>
<div class="Nc_page">
<div class="Nc_page_pre"><i class="ArrowCL"></i></div>
<div class="Nc_page_Ncon">
<ul>
<li class="pgActive">
<a href="#">1</a>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="Nc_page_all">共98条/10页</div>
<div class="Nc_page_next"><i class="ArrowCR"></i></div>
</div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script>
$(function(){
var oE={
Pre:$('.Nc_page_pre'),
Next:$('.Nc_page_next'),
Ul:$('.Nc_page ul'),
Li:$('.Nc_page li'),
i:0,
iSpeed:260
};
//设置Ul的宽度
oE.Ul.css({'width':oE.Li.length*41});
//点击选择页码
oE.Li.click(function(){
$(this).addClass('pgActive').siblings().removeClass('pgActive');
});
//点击向左滚动
oE.Pre.click(function(){
if(oE.i<1) return;
oE.i--;
oE.Ul.stop().animate({left:-41*oE.i},oE.iSpeed);
});
//点击向右滚动
oE.Next.click(function(){
if(oE.i>oE.Li.length-7) return;
oE.i++;
oE.Ul.stop().animate({left:-41*oE.i},oE.iSpeed);
});
});
</script>
</html>