jQueryで簡単にページ送りを自動で表示します。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/pagenav.js"></script> 

[pagenav.js]JavaScript

$(function(){
	
// pagenav current
$(function(){
 var id = $(".mod_pagenav").attr("id");
 var current = $(".mod_pagenav ul li."+id);

 //var prev =$();
 $(current).addClass("active");

  if($(current.next("li")).size()){
   var nextlist = current.next("li");
   var nextlink = nextlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav li.linearNum").before('<li class="linearNext"><a href="'+nextlink+'">次のページへ&gt;&gt;</a></li>');
  }

  if($(current.prev("li")).size()){
   var prevlist = current.prev("li");
   var prevlink = prevlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav").prepend('<li class="linearPrev"><a href="'+prevlink+'">&lt;&lt;前のページへ</a></li>');  
  }

 });

});

HTMl

var pagenav ='<ul class="linearNav">'+
'<li class="linearNum">'+
'<ul>'+
'<li class="page01"><a href="index.html">1</a></li>'+
'<li class="page02"><a href="02.html">2</a></li>'+
'<li class="page03"><a href="03.html">3</a></li>'+
'<li class="page04"><a href="04.html">4</a></li>'+
'<li class="page05"><a href="05.html">5</a></li>'+
'<li class="page06"><a href="06.html">6</a></li>'+
'<li class="page07"><a href="07.html">7</a></li>'+
'</li>'+
'</ul>'
'</ul>';
document.write(pagenav);

▼HTMLソース

<div class="mod_pagenav" id="page01">
<script type="text/javascript" src="js/pagenavlist.js"></script>	
<!-- //mod_pagenav --></div>

CSS

/* mod_pagenav */
.mod_pagenav{
 margin:0 auto;
 width:960px;
 margin:20px 0 20px 0!important;
}
.mod_pagenav ul{
 position:relative;
 text-align:center;
}

.mod_pagenav ul li.linearNum ul li{
	display:inline-block;
	border:1px solid #e5e5e5;
	margin:0 5px 0 5px;
}
.mod_pagenav ul li.linearNum ul li.active,
.mod_pagenav ul li.linearNum ul li a:focus{
	background-color:#f2f2f2;
	font-weight:bold;
}
.mod_pagenav ul li a{
	text-align:center;
	display:block;
  width:25px;
  padding:2px 0 3px 0;
  text-decoration:none!important;
}

.mod_pagenav ul li.linearPrev a,
.mod_pagenav ul li.linearNext a{
 width:auto;
}
.mod_pagenav ul li.linearPrev{
 position:absolute;
 top:0;
 left:0px;
 z-index:9999;
}
.mod_pagenav ul li.linearNext{
 position:absolute;
 top:0;
 right:0px;
 z-index:9999;
}