这个调用图片该如何写

首页一个搜索框，一个搜索按钮
下面一个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.   

    看看能不能用，主要就是读取folder中的files
    <!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>
      

  2.   

    利用 Image 对象试加载图片，未试验，LZ看着改一改用用看！
            //获取下一张图片的数字号
             //@param string num 上一张图片的数字号
             //@param string maxNum 图片的最大数字号
    function nextNum(num, maxNum)
    {
    var _num = num.split('');
    var _len = num.length;
    var _temp = '';
    while(_len > 0)
    {
    _temp = parseInt(_num[_len - 1]) + 1;
    if(_temp < 10)
    {
    _num[_len - 1] = _temp;
    break;
    }
    else
    {
    _num[_len - 1] = 0;
    _len -= 1;
    }
    }
    _temp = _num.join('');
    var _temp2 = getNum(_temp);
    var _temp3 = getNum(maxNum);
    return (_temp2 < _temp3)? _temp.toString() : maxNum;
    }
    //将图片的数字号转换为数字（0124 --> 124）
             //@param string n 要转换的数字号
    function getNum(n)
    {
    var _n = n;
    while(_n.length > 0)
    {
    if(_n.substr(0,1) != 0)
    {
    break;
    }
    _n = _n.substr(1);
    }
    return parseInt(_n);
    }

            //试加载图片直到找到路径正确的图片为止
             //@param element obj 加载图片的父元素
             //@param string num 当前页面的img的数字号
             //@param string maxNum 图片的最大数字号
             //@param string minNum 图片的最小数字号
    function checkImg(obj, num, maxNum, minNum)
    {
    var _num = nextNum(num, maxNum); //获取下一张图片的数字号
    var _img = new Image;
    _img.onload = function() //如果试加载成功则显示图片
    {
    this.onload = null;
    obj.innerHTML = "<img src='"+ num +".jpg' />";
    }
    _img.onerror = function() //如果失败则试加载下下张图片
    {
    this.onerror = null;
    if(getNum(_num) < getNum(maxNum)) //如果最大数字号图片也不存
    {
    _num = minNum;  //从最小数字号开始加载
    }
    checkImg(obj, _num, maxNum)
    }
    _img.src = _num +".jpg";
    } checkImg(document.getElementById('sssss'), '0012', '0032', '0001');//调用
      

  3.   

    感谢shan1119和上面的哥们
    不过用shan1119那个，进入页面开始点击“下一页”和“上一页”，都会弹出“在此页上的ActiveX控件和本页上的其他部分的交互可能不安全。你想允许这种交换吗？”“是”“否”，这可怎么办啊，还有就是，如果选“是”，继续点”下一页“并没有任何图片出现，必须选“是”后，再点击“下一页”然后返回来选“上一页”这样才好使，怎么改才好呢，大家帮我测试一下shan1119的那个代码，帮我试试该怎么改，谢谢了
      

  4.   

    var FSO = new ActiveXObject("Scripting.FileSystemObject");
    因为创建了控件对象，所以会出那个提示。否的话不能读取文件列表。所以不好使。