首页一个搜索框,一个搜索按钮
下面一个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文件夹里有:如 001.jpg ,002.jpg, 005.jpg, 008.jpg, 0020.jpg ,00020.jpg  这些图片

解决方案 »

  1.   


    <!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>
    </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>
    <a href="#" id="prev">上一张</a>
    <a href="#" id="next">下一张</a>
    <script type="text/javascript">
    function Search(){
    document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
    }var btnprev = document.getElementById('prev');
    var btnnext = document.getElementById('next');
    var cout = ['0001','0004','0005','0008'];
    var i = cout.length;
    btnprev.onclick = function(){
    i--;
    if(i<0){
    i=cout.length-1;
    }
    document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
    }
    btnnext.onclick = function(){
    i++;
    if(i>cout.length-1){
    i=0;
    }
    document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
    }</script>
    </body>
    </html>
      

  2.   


    <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 movePic(i){
        var list=["001.jpg" ,"002.jpg" , "005.jpg" , "008.jpg" , "0020.jpg" , "00020.jpg"]; 
        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>
    <div class="navboxcont_77E711"><img src="images/001.jpg" id="img1"/></div>
    <input type=button value=prev onclick="movePic(-1);">
    <input type=button value=next onclick="movePic(1);">
      

  3.   

    <script type="text/javascript">
    function Search(){
       document.getElementById("img1").src = "images/" + document.getElementById("txt").value + ".jpg";
    }var btnprev = document.getElementById('prev');
    var btnnext = document.getElementById('next');
    var cout = ['00001','00004','00005','00008'];
    var i = 0;
    btnprev.onclick = function(){
    i--;
    if(i<0){
    i=cout.length-1;
    }
    document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
    }
    btnnext.onclick = function(){
    i++;
    if(i>cout.length-1){
    i=0;
    }
    document.getElementById("img1").src = "images/" + cout[i] + ".jpg";
    }</script>
      

  4.   

    <!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: 1028px; height:701px}
    .navboxcont_77E712 {  text-align: center; width: 1028px; height:50px}
    .navboxauto_6B6CBB { margin-left:150px;width:auto; height:23px}
    .navboxcont_3E6FD3 {  text-align: center;width: 1028px; height:100px}
    .navboxcont_3FD714 { width: 100%; height:30px}
    .navboxleft_3FD714 { text-align: center; width:490px; float:left; height:30px }
    .navboxauto_3FD714 { text-align: center; margin-left:490px; width:auto; height:30px }
    .navboxcont_56AC5A { width: 100%; height:20px}
    .navboxleft_56AC5A { width:900px; float:left; height:20px}
    .navboxauto_56AC5A { margin-left:900px; width:auto; height:20px}#rowf4 { 
    width:18%; 
    float:left; text-align:center; 
    font-size: small;

    #leftright, #topdown{position:absolute;left:0;
    top:0;width:1px;height:1px;layer-background-color:red;
    background-color:red;z-index:100;font-size:1px;}
    <script type="text/javascript">
    function Search(){document.getElementById("img1").src = "shanghai/" + document.getElementById("txt").value + ".GIF";}</script>
    </head><body><div class="navboxcont_3E6FD3">
    <center><img src="aa/logo.gif" /></center>
    </div>
    <div class="navboxcont_77E712"><font size="6" color="#00de00">上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;海</font></div> <div class="navboxauto_6B6CBB"><input type="text" id="txt" size="49" value="请输入股票代码"onclick="this.value='';" />
    <input type="button" value="确<>定"  onclick="Search()" /></div>
    <br><div class="navboxcont_77E711"><center><img src="shanghai/000001.GIF" id="img1" onerror="this.src='aa/ww.gif'"/></center>
    </div><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div
    id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
    <script>
    <!--
    if (document.all&&!window.print){
    leftright.style.width=document.body.clientWidth-2
    topdown.style.height=document.body.clientHeight-2
    }
    else if (document.layers){
    document.leftright.clip.width=window.innerWidth
    document.leftright.clip.height=1
    document.topdown.clip.width=1
    document.topdown.clip.height=window.innerHeight
    }
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
    else
    topdown.style.pixelLeft=document.body.clientWidth-2
    }
    function followmouse2(e){
    document.leftright.top=e.y+1
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+1
    }
    if (document.all)
    document.onmousemove=followmouse1
    else if (document.layers){
    window.captureEvents(Event.MOUSEMOVE)
    window.onmousemove=followmouse2
    }
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    setTimeout("window.onresize=regenerate",400)
    }
    if ((document.all&&!window.print)||document.layers)
    window.onload=regenerate2
    //-->
    </script>
    </body>
    </html>老师,我的代码写成这样了,整合以上两种都没整合明白,该怎么和我这段代码整合啊,还有就是如现在的排列是var cout = ['000001','000004','000005','000008'];那么我在搜索框输入000004,然后点击“确定”,这时显示的是000004的图片,这时我如果按“下一张”要求他应该显示'000005'的图片,我如果点击“上一页”,他应该显示'000001'的图片,也就是说这个“上一页”和“下一页”,是以当前显示图片而定的,该怎么整合
      

  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: 1028px; height:701px}
    .navboxcont_77E712 { text-align: center; width: 1028px; height:50px}
    .navboxauto_6B6CBB { margin-left:150px;width:auto; height:23px}
    .navboxcont_3E6FD3 { text-align: center;width: 1028px; height:100px}
    .navboxcont_3FD714 { width: 100%; height:30px}
    .navboxleft_3FD714 { text-align: center; width:490px; float:left; height:30px }
    .navboxauto_3FD714 { text-align: center; margin-left:490px; width:auto; height:30px }
    .navboxcont_56AC5A { width: 100%; height:20px}
    .navboxleft_56AC5A { width:900px; float:left; height:20px}
    .navboxauto_56AC5A { margin-left:900px; width:auto; height:20px}#rowf4 {  
    width:18%;  
    float:left;  text-align:center;  
    font-size: small;
    }  
    #leftright, #topdown{position:absolute;left:0;
    top:0;width:1px;height:1px;layer-background-color:red;
    background-color:red;z-index:100;font-size:1px;}
    <script type="text/javascript">
    function Search(){document.getElementById("img1").src = "shanghai/" + document.getElementById("txt").value + ".GIF";
    document.getElementById("img1").title = "shanghai/" + document.getElementById("txt").value + ".GIF";}
    Array.prototype.indexOf=function(o){
        for(var i=0;i<this.length;i++){
            if(this[i]==o)return i;
        }
        return -1;
    }function movePic(i){
        var list=['000001','000004','000005','000008']; 
        var imgP=document.getElementById("img1").src.split("/");
        var index=list.indexOf(imgP[imgP.length-1].split(".")[0]);
        
        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 = "shanghai/" + list[index]+".GIF";
        document.getElementById("img1").title = "shanghai/" + list[index]+".GIF";
    }</script>
    </head><body><div class="navboxcont_3E6FD3">
    <center><img src="aa/logo.gif" /></center>
    </div>
    <div class="navboxcont_77E712"><font size="6" color="#00de00">上&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;海</font></div><div class="navboxauto_6B6CBB"><input type="text" id="txt" size="49" value="请输入股票代码"onclick="this.value='';" />
    <input type="button" value="确<>定" onclick="Search()" />
    <input type=button value=prev onclick="movePic(-1);">
    <input type=button value=next onclick="movePic(1);"></div>
    <br><div class="navboxcont_77E711"><center><img src="shanghai/000001.GIF" id="img1" onerror="this.src='aa/ww.gif'"/></center>
    </div><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div
    id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
    <script>
    <!--
    if (document.all&&!window.print){
    leftright.style.width=document.body.clientWidth-2
    topdown.style.height=document.body.clientHeight-2
    }
    else if (document.layers){
    document.leftright.clip.width=window.innerWidth
    document.leftright.clip.height=1
    document.topdown.clip.width=1
    document.topdown.clip.height=window.innerHeight
    }
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
    else
    topdown.style.pixelLeft=document.body.clientWidth-2
    }
    function followmouse2(e){
    document.leftright.top=e.y+1
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+1
    }
    if (document.all)
    document.onmousemove=followmouse1
    else if (document.layers){
    window.captureEvents(Event.MOUSEMOVE)
    window.onmousemove=followmouse2
    }
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    setTimeout("window.onresize=regenerate",400)
    }
    if ((document.all&&!window.print)||document.layers)
    window.onload=regenerate2
    //-->
    </script>
    </body>
    </html>