博文——网页中Javascript实现翻页

前段时间看了些“妙味茶馆”的JavaScript视频教程，有些收获。想不到，到今年的电脑作品辅导时就派上用场了。先看个今年辅导的网站作品《行走在城市边缘》截图，本页中有五个照片集，怎样实现翻页呢？我用JavaScript写了个脚本，这还是这么多年来第一次自己写脚本，以前都是改别人写好的，以此发博文，给自己留个资料，有兴趣的可以参考，不懂可以问我。

先交代下网页布局元素，五个图集做成网页，分别是tuji001.html到tuji005.html，用iframe调用图集页面：
<iframe id="tuji" name="tuji" frameBorder=0  src="tuji001.html" width="100%" height="900px" scrolling="no" ></iframe>
<script type="text/javascript">
页面中“前一集”、“后一集”设置id为btn1和btn2：
<span id="btn1" class="noactive">&lt;-前一集</span>｜<span id="btn2" class="noactive">后一集-&gt;　　</span>
页面中“第X集”，这个设置id为page，在脚本中用page.innerHTML='&nbsp;'+k+'&nbsp;';显示；
样式设置：脚本中鼠标进入和离开不一样！
<style type="text/css">
.noactive {
 font-family: "微软雅黑", "宋体", "楷体";
 font-size: 15px;
 font-weight: bold;
 color: #000;
 line-height: 150%;
}
.active {
 color: #FF3300;
 cursor:pointer;
 /*text-decoration: underline; */
}
</style>

下面是代码：
window.onload=function()
{
 var btn1=document.getElementById('btn1');
 var btn2=document.getElementById('btn2');
 var tj=document.getElementById('tuji');
 var page=document.getElementById('page');
 var k=1;
 
 btn1.onclick=function()
 {
  
  if(k<=1)
  {
   k=1;
   tj.src='tuji00'+k+'.html';
  }else{
   k--;
   tj.src='tuji00'+k+'.html';
  }
  page.innerHTML='&nbsp;'+k+'&nbsp;';  
 } 
 
 btn2.onclick=function()
 {
  
  if(k>=5)
  {
   k=5;
   tj.src='tuji00'+k+'.html';
  }else{
   k++;
   tj.src='tuji00'+k+'.html';
  }
  page.innerHTML='&nbsp;'+k+'&nbsp;';  
 }
 
 btn1.onmouseover=function()
 {
  btn1.className='active';
 }
 btn1.onmouseout=function()
 {
  btn1.className='noactive';
 }
 
 btn2.onmouseover=function()
 {
  btn2.className='active';
 }
 btn2.onmouseout=function()
 {
  btn2.className='noactive';
 }
 
  
}
</script>