<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.aa{ 50px;height: 50px;border: 1px solid black;margin-right:8px;display: inline-block;text-align: center;line-height: 50px }
.active{border: 0;border-radius:100%;background: green;color:white;font-size: 25px; }
</style>
<script src="jquery-1.12.3.min.js"></script>
</head>
<body>
<div id="cc">
<input type="button" value="上一页" id="pre">
<span class="aa">1</span>
<span class="aa">2</span>
<span class="aa">3</span>
<span class="aa">4</span>
<span class="aa">5</span>
<span class="aa">6</span>
<span class="aa">7</span>
<span class="aa">8</span>
<span class="aa">9</span>
<span class="aa">10</span>
<input type="button" value="下一页" id="next">
</div>
<script type="text/javascript">
$('.aa').click(function(){
var activeNum=+$(this).html();
if(activeNum<=5){
for(var i=1;i<10;i++){
$('.aa:eq('+(i-1)+')').html(i);
}
$('.aa:eq('+(activeNum-1)+')').addClass('active');
$('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
}
var ac=activeNum;
if(activeNum>=6){
$('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
for(var i=5;i>=0;i--){
$('.aa:eq('+i+')').html(ac--);
}
var bc=activeNum+1;
for(var i=1;i<=4;i++){
var y=5+i;
$('.aa:eq('+y+')').html(bc++);
}
}
})
$('#next').click(function(){
var activeNum= +"10";
if($('#cc span').hasClass('active')){
activeNum=+$('.active').html()+1;
}
//alert(activeNum)
//var activeNum=+$(this).html()+1;
if(activeNum<=5){
for(var i=1;i<10;i++){
$('.aa:eq('+(i-1)+')').html(i);
}
$('.aa:eq('+(activeNum-1)+')').addClass('active');
$('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
}
var ac=activeNum;
if(activeNum>=6){
$('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
for(var i=5;i>=0;i--){
$('.aa:eq('+i+')').html(ac--);
}
var bc=activeNum+1;
for(var i=1;i<=4;i++){
var y=5+i;
$('.aa:eq('+y+')').html(bc++);
}
}
})
$('#pre').click(function(){
var activeNum= +"1";
if($('#cc span').hasClass('active')){
activeNum=+$('.active').html()-1;
}
//alert(activeNum)
//var activeNum=+$(this).html()+1;
if(activeNum<=5){
for(var i=1;i<10;i++){
$('.aa:eq('+(i-1)+')').html(i);
}
$('.aa:eq('+(activeNum-1)+')').addClass('active');
$('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
}
var ac=activeNum;
if(activeNum>=6){
$('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
for(var i=5;i>=0;i--){
$('.aa:eq('+i+')').html(ac--);
}
var bc=activeNum+1;
for(var i=1;i<=4;i++){
var y=5+i;
$('.aa:eq('+y+')').html(bc++);
}
}
})
</script>
</body>
</html>