关于图片循环顺序显示的问题

<html>
<head>
<title>image测试 </title>
<script language="javascript">var i=1;  //目前显示照片的张数
var n=10;  //照片的总张数
var showid=null;  //setInterval()的idfunction changeimg() //显示当前图片
{
if(i>n)
i=1;
document.imageshow.test.src="*";//*表示你存放照片的位置（jpg文件，按1开始编号）
i++;
}

function showPic()  //循环展示图片
{
showid=window.setInterval(changeimg,2000);
}

function stopshow()  //停止循环展示图片
{
window.clearInterval(showid);
}

function goFirst()//跳到第一张图片
{
if(i==1)
{
alert("已经是第一张");
return;
}
i=1;
document.imageshow.test.src="*"+1+".JPG";
}

function goLast()//跳到最后一张图片
{
if(i==31)
{
alert("已经是最后一张");
return;
}
i=31;
document.imageshow.test.src="*"+n+".JPG";
}

function goNext()//跳到下一张图片
{
if(i==31)
{
alert("已经是最后一张");
return;
}
document.imageshow.test.src="*"+(++i)+".JPG";
}

function goPrevious()//跳到上一张图片
{
if(i==1)
{
alert("已经是第一张");
return;
}
document.imageshow.test.src="*"+(--i)+".JPG";
}
</script>
</head>
<body onUnload="changeimg();">
<form name="imageshow">
<font size=5 color="blue"><center>
<marquee behavior=alternate bgcolor="yellow" width=1000>啦啦啦，这都是我的照片啊！
</marquee> 
</font>
<image src="*/1.jpg" align=center height="700" width="1000" name="test"><br/>
<input type="button" value="第一张" onClick="goFirst();"> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="上一张" onClick="goPrevious();"> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="下一张" onClick="goNext();"> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="最后一张" onClick="goLast();"> <p>
<input type="button" value="动态展示图片" onClick="showPic();">  &nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="停止展示图片" onClick="stopshow();">
</center>
</form>
</body>
</html>