关闭

导航左右移动.html

315人阅读 评论(0) 收藏 举报

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<title>Document</title>
<style type="text/css">
 .block { width:100px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 room_block(); 
});

/* 选择房间导航的分页 */
function show_block(a,b,c){
 for(var i=a;i<=c;i++){
  $("#block"+i+"").hide();
  if(i<=b&&i>=a){
   $("#block"+i+"").show();
  }
  else{
   $("#block"+i+"").hide();
  } 
 }
}
function room_block(){
 var max_num=9;
 var next_hide_block=1;
 var next_show_block=6; 
 show_block(next_hide_block,next_show_block,max_num);
//上一个,id>1;点击向左移动的按钮,隐藏从最大开始开始
 $("#prev_num").click(function(){
  if(next_hide_block>=2){
   next_hide_block--;
   next_show_block--;
   show_block(next_hide_block,next_show_block,max_num);   
  }
  else{
   alert("已经是最左了");
  }
  
 });
//下一个,id>6&&id<max;点击向右移动的按钮,隐藏从1开始,显示从7开始
 $("#next_num").click(function(){  
  if(max_num>next_show_block&&next_show_block>=6){
   next_show_block++;  
   $("#block"+next_hide_block+"").hide();
   $("#block"+next_show_block+"").show();
   next_hide_block++; 
  }
  else{
   alert("已经最右了");
  }
 });
}

</script>
</head>
<body>
<table class="equip_nav" cellpadding="0" cellspacing="0"><tr>
 <td width="20" align="center"><a href="#" id="prev_num"><span><<</span></a></td>
 <td width="20"><span>|</span></td>
 <td><table class="block" id="block1"><tr><td><span><a href="#">1</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block2"><tr><td><span><a href="#">2</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block3"><tr><td><span><a href="#">3</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block4"><tr><td><span><a href="#">4</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block5"><tr><td><span><a href="#">5</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block6"><tr><td><span><a href="#">6</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block7"><tr><td><span><a href="#">7</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block8"><tr><td><span><a href="#">8</a></span></td><td><span>|</span></td></tr></table></td>
 <td><table class="block" id="block9"><tr><td><span><a href="#">9</a></span></td><td><span>|</span></td></tr></table></td>
 <td width="20" align="center"><a href="#" id="next_num"><span>>></span></a></td>       
</tr></table>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场