​
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script> 
<style type="text/css">
.paging{color:#555;padding:0;}
.paging li{list-style:none;}
.paging li{line-height:25px; cursor:default; text-align:center; width:25px; height:25px; display:inline-block; font-size: 12px; font-weight:bold; color:#333;}
.paging .pg:hover{cursor:pointer; text-decoration: underline}
.paging .current{color:#FF3636; cursor:default !important; text-decoration:none !important;}
.first, .pre, .next, .last{color:#888 !important;}
.first, .last{letter-spacing:-3px;}
.active{color:#333 !important; cursor:pointer !important;}
</style>
 
<script type="text/javascript">​
 
window.onload = function() {
var n = 0,
    c  = 35 , // 전체페이지(35페이지)
    w = 27 , //페이지표시 1개의 가로사이즈값
    current = 1; // 현재페이지(1페이지)
 
/* 페이지클릭시 */
$(document).delegate('.pg','click',function(e){
current = parseInt($(this).text());
$('.pg').removeClass('current');$(this).addClass('current'); // 페이지 클릭시 추가되는 클래스(current)
});
 
/* 맨앞, 앞, 뒤, 맨뒤 버튼 클릭시 */
$(document).delegate('.first, .pre, .next, .last','click',function(e){
var x = Math.floor((parseInt($('.paging').css('width'))-w*4)/w);
if(x > 10){x=10;}
if(n >= 1){
if($(this).is('.first')){current=1;paging();}
if($(this).is('.pre')){current=n-x+1;paging();}
} 
if(c > n+x){
if($(this).is('.next')){current=n+x+1;paging();}
if($(this).is('.last')){current=c;paging();}
}
});
    
/* 맨앞, 앞, 뒤, 맨뒤 버튼 클릭시 */
function paging(){
var page='<li class="first"><<</li><li class="pre"><</li>';
var x = Math.floor((parseInt($('.paging').css('width'))-w*4)/w);
if(x > 10){x=10;}
n = Math.floor(current/x);
if(n == current/x){n = n*x-x;}else{n = n*x}
for(var i=1; i <= x; i++ ){
if(current == i+n){
page += '<li class="pg current">'+(i+n)+'</li>';
}else{
page += '<li class="pg">'+(i+n)+'</li>';}
if(i == x || i == 10 || i+n == c){$('.paging').html(page+'<li class="next">></li><li class="last">>></li>');
if(n > 1){$('.first, .pre').addClass('active');}  // 맨앞, 앞 활성화시 추가되는 클래스(active)
if(c > n+x){$('.next, .last').addClass('active');}  // 뒤, 맨뒤 버튼 활성화시 추가되는 클래스(active)
break}}
}
 
paging() //웹페이지 불러올시 반응형페이징 함수 작동
 
window.onresize = function(){paging()}  //브라우저 사이즈 조절시 반응형페이징 함수 작동
}
 
</script>
 
<ul class="paging"></ul> <!-- 반응형페이징을 불러올 위치 -->