[原创]用javascript实现相册上下翻页功能
我们上网浏览别人的相片的时候经常看到有“上一面”、“下一页”的功能，只要点击一下，就可以看一下张图片，这里我们叫他做翻页功能，在动态网页里是很容易实现的，如asp就有专门的分页技术。但是如果是做静态网页html，也可以实现翻页功能吗？？这是我的一个舍友问我的问题，我回答他的方法是每一张图片做一个页面，然后做一下超连接，就可以了，但是这种方法实在是工作繁重！而且是最笨的方法，有没有更好更智能的办法呢？为此我在网上搜索了很久，也没有结果，不过我想想，用javascript也应该可以实现的呀！于是，经过我2个小时的摸索，终于自己编写了一个可以上下翻页的相册页面，实现翻页功能。下面我简单的介绍一下，javascript，你想叫他做任何一件事，首先要告诉他你要对哪个对象操作，也就是喊名字，然后javascript才可以正确的对对象动作。如：对
<img src="1.jpg" name="tus">这个图像对象的图片名称动作，俗一点说就是首先要喊出他来，代码如下：
document.images.tus.src
明白这一点就容易多了，我所用的原理是，把图片命名为1.jpg、2.jpg、3.jpg、……通过超连接调用一个函数，而这个函数负责改变显示的图片，即调用一次图片的名称的数字就加一，实现了下一张的功能，这个函数如下 ：
function showimage()
{if(t<15){
t=t+1;
document.images.tus.src=""+t+".jpg";}
}
而用超连接调用javascript函数的方法是：
<a href="javascript:showimage()">下一张</a>
就这么简单，用同样的方法可以泡制出上一张的代码。完整的代码如下（hh.htm）：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>我的相册</title>
</head>
<body>
<table width="697" border="1" bordercolor="#00CC00" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="750" height="47" valign="top"><div align="center">我的相册</div></td>
</tr>
<tr>
<td height="334" valign="top"><img src="0.jpg" name="tus" width="550" height="400"></td>
</tr>
<tr>
<td height="31" align="center" valign="middle">
<script>
var t=0;
function showimage()
{if(t<15){
t=t+1;
document.images.tus.src=""+t+".jpg";}
else
alert("没有下一张啦！这是最后一张了！");
}
function showimage1()
{if(t>0){
t=t-1;
document.images.tus.src=""+t+".jpg";}
else
alert("没有上一张啦！这是第一张了！");
}
</script>
<a href="javascript:showimage1()">上一张</a> <a href="javascript:showimage()">下一张</a>
</td>
</tr>
<tr>
<td height="212" valign="top"></td>
</tr>
</table>
</body>
</html>
