这个循环该如何写呢

首页一个搜索框，一个搜索按钮
下面一个css图片框.navboxcont_77E711 { width: 80px; height:80px}
搜索框，输入代码如00001，点击“搜索”
那么<div class="navboxcont_77E711"><img src="images/00001.jpg" /></div>如输入02023，单击“搜索”
那么<div class="navboxcont_77E711"><img src="images/02023.jpg" /></div>
等等
也就是搜索框输入的是什么代码，点击“搜索”后它就显示images文件夹里以这个代码为名称的图片，格式都是jpg的
打开页面吗默认显示为00001现在代码如下：<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.navboxcont_77E711 { width: 80px; height:80px}
</style>
<script type="text/javascript">
function Search(){
    document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
}
</script>
</head><body>
<input type="text" id="txt" /><input type="button" value="搜索" onclick="Search()" />
<div class="navboxcont_77E711"><img src="images/00001.jpg" id="img1" /></div>
</body>
</html>
想添加一段文字连接，就是“下一张”，和“上一张”
点击这个“下一张”，navboxcont_77E711图片框里的图片更改为images里当前图片的下一个图片文件，如images里的0001.jpg的下一张为0004.jpg,下一张为0005.jpg,下一张为0008.jpg......，当前为0001点击“下一张”，图片框换成0004.jpg,在点击“下一张”图片框换成0005.jpg,在点击“下一张”图片框换成0008.jpg......循环，当点击到最后一张时，再点击“下一张”回到第一张图片，也就是循环
点击“上一张”的和他效果相反，当碰到第一张图片再点击"上一张“时是显示最后一张，
也就是一个正循环显示，一个反循环显示
这个下一张和上一张该怎么写，按钮也行，能实现这个功能就行