这个调用图片该如何写啊

首页一个搜索框，一个搜索按钮
下面一个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......循环，当点击到最后一张时，再点击“下一张”回到第一张图片，也就是循环
点击“上一张”的和他效果相反，当碰到第一张图片再点击"上一张“时是显示最后一张，
也就是一个正循环显示，一个反循环显示
这个下一张和上一张该怎么写，按钮也行，能实现这个功能就行 ，还是在images文件夹里找（按图片文件在文件夹里的顺序），没有数据库，但有好几千张图片

解决方案 »

  1.   

    要想实现这个功能，可以有两个思路：
    1、客户端得知道服务器上有那些图片，也就是说服务器返回页面的时候要将服务器上的图片（images）文件夹下的文件读出来，并发送到客户端。可以考虑服务器返回一个数组
    类似：var imagelist = ['0001.jpg','0004.jpg',.....];
    然后上一张、下一张点击的时候去数组里找就行了。
    2、客户端不知道服务器上有那些图片，用户点击上一张、下一张时，使用AJAX回传当前的图片名称和要查找的顺序（向上找还是向下找），服务器端代码查找，并返回一个图片路径
      

  2.   

    类似：var imagelist = ['0001.jpg','0004.jpg',.....];
    这样不行，好几千张图片，每天都有不一样的，这样写就需要天天换，很麻烦
      

  3.   

    要实现你的功能必须满足：
    1，文件名采用固定的位数，才能进行上一张 下一张的判断，才能判断文件是否到达文件列表的尾部
    或者
    2，采用asp等服务器端的代码实现
      

  4.   

    这个数组要由服务器返回，怎么可能写死？？不用换的服务器代码：
       var files =获取images文件加下所有文件集合 ；
      //循环输出文件名
      

  5.   

    <!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">
    Array.prototype.indexOf=function(o){
        for(var i=0;i<this.length;i++){
            if(this[i]==o)return i;
        }
        return -1;
    }
    function Search(){
        document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
    }
    function getFiles(path){
        var FSO = new ActiveXObject("Scripting.FileSystemObject");
        var list=[];
        if(FSO.FolderExists(path)){
            var files = new Enumerator(FSO.GetFolder(path).Files);
            for(; !files.atEnd(); files.moveNext()){
                list[list.length]= files.item().Name;
            }
        }
        return list;
    }
    function movePic(i){
        var list=getFiles("images/");
        var imgP=document.getElementById("img1").src.split("/");
        var index=list.indexOf(imgP[imgP.length-1]);
        
        index+=i;
        if(i==-1 && index==-1)index=list.length-1;
        if(i== 1 && index==list.length)index=0;
        if(index==-1)index=0;
        document.getElementById("img1").src = "images/" + list[index];
        document.getElementById("img1").title = "images/" + list[index];
    }</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>
    <input type=button value=prev onclick="movePic(-1);">
    <input type=button value=next onclick="movePic(1);"></body>
    </html>前几天给出这样一个答案，不过进入页面开始点击“下一页”和“上一页”，都会弹出“在此页上的ActiveX控件和本页上的其他部分的交互可能不安全。你想允许这种交换吗？”“是”“否”，这可怎么办啊，还有就是，如果选“是”，继续点”下一页“并没有任何图片出现，必须选“是”后，再点击“下一页”然后返回来选“上一页”这样才好使，怎么改才好呢
      

  6.   

    上面的代码纯属扯淡，客户端的fso怎么能读取服务器的文件？
      

  7.   

    没办法了，那如果知道所有文件名，如 001.jpg 002.jpg 005.jpg 008.jpg 0020.jpg 00020.jpg 
    这样我上面的代码该如何修改能添加到“上一页”，“下一页”的效果呢