怎么样js实现这样的分页效果高手指点啊急！！

实现这样的分页 共20部 共4页 当前第  页 [下一页] [尾页]
我的代码是这样的谁能帮我改改啊
function getObject(objID)
{if (document.getElementById && document.getElementById(objID)) 
{return document.getElementById(objID);} 
else 
{if (document.all && document.all(objID)) 
{return document.all(objectId);} 
 else 
{if (document.layers && document.layers[objID]) 
{return document.layers[objID];} 
else
{return false;}
}
}
}
function x_pi(y)
{for (var i = 1; i <5; i++)
{
if (i == y) 
{
getObject("d" + i).className="href1"
getObject("x_pi" + i).style.display = "";
} 
else{
getObject("d" + i).className="href2"
getObject("x_pi" + i).style.display = "none";}}}
</script>       <div class="fenye" style="white-space:nowrap;" > 共20部 共4页 当前第 
<input id="page" type="text" size="1" onclick="x_pi(1)" title="$user.title" class="href1" onclick=onkeyup > 
页 
  <a id="d2" title="$user.title"
  onclick="x_pi(2)" class="href2">[下一页]</a>  <a id="d3"  title="$user.title"
 onclick="x_pi(3)" class="href2"></a>  <a id="d4"  title="$user.title"
 onclick="x_pi(4)" class="href2">[尾页]</a></div>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>tab.html</title>
    <meta http-equiv="author" content="hoojo">
    <meta http-equiv="email" content="[email protected]">
    <meta http-equiv="blog" content="blog.csdn.net/IBM_hoojo">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    .subject {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    }
    .subject img {
    width: 200px;
    height: 200px;
    }
    </style>
    <script type="text/javascript">

         window.onload = function () {
         var oBox = document.getElementById("subjectBox");
         var oShowId = document.getElementById("showId").value;
         var subjectHtml = "";
         var len = 20;//配置你的共多少页
         document.getElementById("totals").innerHTML = len;//总共多少页
         document.getElementById("currentNo").innerHTML = oShowId;//当前显示页数
         for (var i = 1; i <= len; i++) {
         if (i == oShowId) {
         subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>第" + i + "张/共" + len + "张</div>"
         } else {
         subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>第" + i + "张/共" + len + "张</div>"
         }
         }
         oBox.innerHTML = subjectHtml;
         };
        
         function setHide() {
         var allDiv = document.getElementsByName("showDiv");
         for (var i = 0; i < allDiv.length; i++) {
         if (allDiv[i].style.display != "none") {
         allDiv[i].style.display = "none";
         }
         }
         }
             
        
         //方法一：
         function showSubject(flag) {
        var oShowId = document.getElementById("showId").value;
        var allDiv = document.getElementsByName("showDiv");
        var len = allDiv.length;
        setHide();//隐藏所有div
         if (flag == "next") {
         oShowId = eval(oShowId) + 1;
         if (oShowId > len) {
         oShowId = 1;
         }
         document.getElementById("div_" + oShowId).style.display = "block";
         } else {
         oShowId = eval(oShowId) - 1;
         if (oShowId < 1) {
         oShowId = len;
         }
         document.getElementById("div_" + oShowId).style.display = "block";
         }
         document.getElementById("showId").value = oShowId;
         document.getElementById("currentNo").innerHTML = oShowId;
         }
        
         //方法二：
         function showSubject2(flag) {
        var allDiv = document.getElementsByName("showDiv");
        for (var i = 0, len = allDiv.length; i < len; i++) {
        if (allDiv[i].style.display == "block") {
         allDiv[i].style.display = "none";
         if (flag == "next") {
         if (i < len) {
         i += 1;
         }
         if (i >= len) {
         i = 0;
         }
         } else {
         if (i > 0) {
         i -= 1;
         }
         if (i <= 0) {
         i = len - 1;
         }
         }
         document.getElementById("currentNo").innerHTML = i+1;
        allDiv[i].style.display = "block";
         break;
         }
        }
         }
        </script>
    </head> <body>
    方法1：
    <input type="button" value="上" onclick="showSubject('prev')" />
    <input type="button" value="下" onclick="showSubject('next')" />
    <input type="hidden" id="showId" value="1" />
    第<span id="currentNo"></span>页/共<span id="totals"></span>
    <br />
    方法2：
    <input type="button" value="上" onclick="showSubject2('prev')" />
    <input type="button" value="下" onclick="showSubject2('next')" />
    <div id="subjectBox"></div>
    </body>
    </html>