页码部分的js
更新:HHH   时间:2023-1-7


<!--页码部分开始-->
     <div class="public_ym" >
        <ul id="upage">
          <li id="public_ym_left"><a href="javascript:void(0)" ></a></li>
          <?php
          for($j=1;$j<=$totalpage;$j++){

           echo '<li><a id="page'.$j.'" class="vpage" href="javascript:void(0)">'.$j.'</a></li>';
           }

           if($totalpage>5)
           echo '<li><a href="javascript:void(0)" >......</a></li>';
           ?>
          <li id="public_ym_right"><a href="javascript:void(0)"></a></li>
        </ul>
        <table border="0" cellpadding="0" cellspacing="0" class="public_tzy">
           <tr>

             <td width="59"> 共<span id="sump"><{$totalpage}></span>页<span>
             <td width="64" align="right">到第</td>
             <td width="57" align="center"><input name="" type="text" class="ym_tzys" /></td>
             <td><input type="button" id="jump" name="" value="跳"/></span></td>
           </tr>
        </table>
   </div>
<!--页码部分结束-->
<!--页码部分js-->
<script>
   $(function(){
   //取总页数
       var sump=$('#sump').text();
       //页面左侧按钮
           $('#public_ym_left').live('click',function(){
               //<符号的右侧的第一个号

           var sibQ=$('#public_ym_left').next().text();
           //定起始位置,滑动页码
           if(sibQ>=1&&sibQ<=5) var start=1;
           if(sibQ>5)
               var start=parseInt(sibQ)-4;
               start=start<0?0:start;
           $("#upage").children().remove();
           var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');
           var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');
           if(parseInt(end)>5)
               var loage=$('<li><a href="javascript:void(0)">......</a></li>');
           else
               var loage=$('<li><a href="javascript:void(0)" >......</a></li>');    
           //链接左滑动按钮
           $("#upage").append(childQ);
           var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);
           for(var i=start;i<=end;i++)
           {
               var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');
               $("#upage").append(son);
           }
           //链接省略号
               $("#upage").append(loage);
           //链接右滑动按钮
               $("#upage").append(childH);
               $('#public_ym_left').unbind();
       });    
       //页码右侧按钮
       $('#public_ym_right').live('click',function(){

           var sibH=$('#public_ym_right').prev().prev().text();

           //定起始位置,滑动页码
           var start=parseInt(sibH);
           $("#upage").children().remove();
           var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');
           var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');
           if(parseInt(end)>5)
               var loage=$('<li><a href="javascript:void(0)">......</a></li>');
           else
               var loage=$('<li><a href="javascript:void(0)" >......</a></li>');    
           $("#upage").append(childQ);
           var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);
           for(var i=start;i<=end;i++)
           {
               var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');
               $("#upage").append(son);
           }  
               $("#upage").append(loage);
               $("#upage").append(childH);
               $('#public_ym_right').unbind();    

       });
       //页面跳转输入框控制
       $('.ym_tzys').bind('blur',function(){
           var p=$('.ym_tzys').val();
           if(p>sump) $('.ym_tzys').val(sump);
       });


       //点击具体页码或是页面跳转按钮,跳转页面
       $('.vpage').live('click',function(){
           var p=$('.ym_tzys').val();

           var pgNum=(!p||p<sump)?($(this).text()):p;
           //alert(pgNum);
           $.post('__URL__/turnpage',{page:pgNum},function(data){
               //alert(data['gd'][1]['goodsURL']);
               if($('#bfcontent').children().length==5)
                   $('.title_more').css('display','block');
               $.each($('.vpage'),function(i,val){
                   $('.vpage').css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_link.png)');

               });
           $(this).css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_hover.png)');//所点击的页为粉色背景
           $(this).css('color','#fff');//所点击的页为粉色背景

               //$("#button1").after("<span>内容</span>")   $("<span>内容</span>").insertAfter("#button1")
           start=parseInt(pgNum);

           $("#upage").children().remove();
           var childQ=$('<li id="public_ym_left"><a href="javascript:void(0)"></a></li>');
           var childH=$('<li id="public_ym_right"><a href="javascript:void(0)"></a></li>');
           if(parseInt(end)>5)
               var loage=$('<li><a href="javascript:void(0)">......</a></li>');
           else
               var loage=$('<li><a href="javascript:void(0)" >......</a></li>');        
           $("#upage").append(childQ);
           var end=(start+5>parseInt(sump))?parseInt(sump):(start+5);
           for(var i=start;i<=end;i++)
           {
               var son=$('<li><a class="vpage" id="page'+i+'" href="javascript:void(0)">'+i+'</a></li>');
               $("#upage").append(son);
           }
               $("#upage").append(loage);
               $("#upage").append(childH);
               $('#page'+start).css('background-p_w_picpath','url(__PUBLIC__/Home/img/ym_hover.png)');
               $('#page'+start).css('color','#fff');


               //    清空页面内容,重新链接新页面的数据节点
               $('#cttwhl').children().remove();


           for(var j=0;j<2;j++)
               {//alert(data['curpage']);
                   var k=(data['curpage']-1)*2+j;

                   var bfcont=$('<div class="zy_scj_box" id="wc'+k+'"></div>');
                   $('#cttwhl').append(bfcont);
                   for(var i=0;i<6;i++){
                   var m=k*6+i;

                   var son1=$('<div class="zy_scj_box_wai" id="divbx'+m+'"></div>');
                   $('#wc'+k).append(son1);

                   var hson=$('<h2><a href="__APP__/Goods/dpxq/goodsID/'+data['gd'][m]['goodsID']+'" target="_parent"><img src="'+data['gd'][m]['goodsURL']+'" /></a></h2>');
                   $('#divbx'+m).append(hson);
                   var sons=$('<div class=""><table width="150" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="150" border="0" cellspacing="0" cellpadding="0"><tr><td width="20"><input name="suoyou" type="checkbox" value="" /></td><td width="130"> '+data['gd'][m]['goodsName']+'</td></tr></table></td></tr><tr><td class="zy_cont_size">¥:'+data['gd'][m]['goodsPrice']+'</td></tr><tr><td><table width="150" height="26" border="0" cellspacing="0" cellpadding="0"><tr><td width="24" class="zy_tb_jrdp"><a href="#">&nbsp;</a></td><td width="24" class="zy_wdfx_02" un="kkkk'+data['gd'][m]['goodsID']+'"><a href="#">&nbsp;</a></td><td width="32">&nbsp;</td></tr></table></td></tr></table></div>');
                   $('#divbx'+m).append(sons);
               }

               }
           },'json');
       });

   });
</script>

/*--页码数--*/
.public_ym{ margin:0 auto; width:570px; height:50px; padding-top:50px; clear:both;}
.public_ym ul{ float:left;}
.public_ym ul li{ display:block; text-align:center; f; height:39px; line-height:32px; background:url(../img/ym_link.png); font-size:14px; font-family:"微软雅黑";}loat:left; padding-left:10px;}
.public_ym ul li a{ display:block;width:38px
.public_ym ul li a:hover{ display:block; background:url(../img/ym_hover.png) no-repeat; color:#FFF;}
#public_ym_left a{ background:url(../img/ym_link_left.png);width:38px; height:39px; display:block;}
#public_ym_left a:hover{ background:url(../img/ym_hover_left.png);width:38px; height:39px; display:block;}
#public_ym_right a{ background:url(../img/ym_link_right.png);width:38px; height:39px; display:block;}
#public_ym_right a:hover{ background:url(../img/ym_hover_right.png);width:38px; height:39px; display:block;}
.public_tzy{ float:left; width:180px; line-height:30px;}
.ym_tzys{ width:40px; border:1px solid #c2c2c2; height:20px; text-align:center;}
/*--页码数--*/

返回web开发教程...