如何显示上一张,下一张图片

<body>
<img id="img" /><br />
<input type="button" value="Pre" onclick="imgMove(-1)" /><input type="button" value="Next" onclick="imgMove(1)" />
<script>
var imgArray=new Array("http://fs1.cyworld.com.cn/data4/2006/03/16/189/thumb-1142497389597252_file.jpg","http://fs1.cyworld.com.cn/data4/2006/03/16/143/thumb-1142497343606319_file.jpg","http://fs1.cyworld.com.cn/data4/2006/03/16/070/thumb-1142497270740481_file.jpg");
var presentIndex=0;
var max=imgArray.length;
function imgMove(unit)
{
var obj=document.getElementById("img");
if(presentIndex+unit>=0&&presentIndex+unit<max)
presentIndex+=unit;
obj.src=imgArray[presentIndex];
}
</script>
</body>

解决方案 »

  1.   

    没看清楚需求,还要打开自己啊
    <body>
    <img id="img" /><br />
    <input type="button" value="Pre" onclick="imgMove(-1)" /><input type="button" value="Next" onclick="imgMove(1)" />
    <script>
    var imgArray=new Array("http://fs1.cyworld.com.cn/data4/2006/03/16/189/thumb-1142497389597252_file.jpg","http://fs1.cyworld.com.cn/data4/2006/03/16/143/thumb-1142497343606319_file.jpg","http://fs1.cyworld.com.cn/data4/2006/03/16/070/thumb-1142497270740481_file.jpg");
    var presentIndex=0;
    var max=imgArray.length;
    function imgMove(unit)
    {
    var obj=document.getElementById("img");
    if(presentIndex+unit>=0&&presentIndex+unit<max)
    presentIndex+=unit;
    obj.src=imgArray[presentIndex];
    obj.style.cursor="hand";
    obj.attachEvent('onclick',function(){window.open(obj.src);});
    }
    </script>
    </body>
      

  2.   

    <a href="1jpg" target="_blank"><img id="img1" src="1.jpg"></a><br>
    <a href="javascript:prevImg()">上一张</a>&nbsp;&nbsp;<a href="javascript:nextImg()">下一张</a>  <SCRIPT LANGUAGE="JavaScript">
    <!--
    var currentIndex = 0;
    var img1 = document.getElementById("img1");
    var imgArray = new Array();
    imgArray[0] = "1.jpg";
    imgArray[1] = "2.jpg";
    imgArray[2] = "3.jpg";
    imgArray[3] = "4.jpg";function nextImg() {
      if (currentIndex < imgArray.length){
        currentIndex ++;
        img1.src = imgArray[currentIndex];
        img1.parentNode.href = imgArray[currentIndex];
      }
    }
    function prevImg() {
      if (currentIndex > 0){
        currentIndex --;
        img1.src = imgArray[currentIndex];
        img1.parentNode.href = imgArray[currentIndex];
      }}
    //-->
    </SCRIPT>
      

  3.   

    再简化一下：
    <a href="1jpg" target="_blank"><img id="img1" src="1.jpg"></a><br>
    <a href="javascript:prevImg()">上一张</a>&nbsp;&nbsp;<a href="javascript:nextImg()">下一张</a>  <SCRIPT LANGUAGE="JavaScript">
    <!--
    var currentIndex = 0;
    var img1 = document.getElementById("img1");
    var imgArray = new Array();
    imgArray[0] = "1.jpg";
    imgArray[1] = "2.jpg";
    imgArray[2] = "3.jpg";
    imgArray[3] = "4.jpg";function nextImg() {
      if (currentIndex < imgArray.length){
        currentIndex ++;
        img1.parentNode.href = img1.src = imgArray[currentIndex];
      }
    }
    function prevImg() {
      if (currentIndex > 0){
        currentIndex --;
        img1.parentNode.href = img1.src = imgArray[currentIndex];
      }}
    //-->
    </SCRIPT>
      

  4.   

    <body>
    <img id=imgFld>
    <input type=button id=prev value="上一张" onclick=prevImg()>
    <input type=button id=next value="下一张" onclick=nextImg()><script>
    var arrImg=new Array('1.gif','2.gif','3.gif');
    var i=0;
    document.getElementById("imgFld").src=arrImg[0];function prevImg() {  
      if(i==0) return;
      i--;
      document.getElementById("imgFld").src=arrImg[i];
    }function nextImg() {  
      if(i==arrImg.length-1) return;
      i++;
      document.getElementById("imgFld").src=arrImg[i];}
    </script>
    </body>
      

  5.   

    谢谢各位老位老大帮忙!第一位:有一个小BUG,如果我显示第三张图片的时候,我点一图片,他会打开三个窗口
    第二位:页面打开初始化的时候.我想显示数组里的第一张图片,调试半天,实在调试不出来
    第三位:图片没有连接我自己结合三位老大的东东.调试好了.再次谢谢三位老大
      

  6.   

    我已经调试通过了,现在想加一个东东,就是当前图片是第几张图片?<body>
    <img id=imgFld>
    <input type=button id=prev value="上一张" onclick=prevImg()>
    <input type=button id=next value="下一张" onclick=nextImg()>共有?张图片，当前显示第?张图片<script>
    var arrImg=new Array("http://db.chinacars.com/newcars/manage/carpic/20060320033231954_69375_New.jpg","http://db.chinacars.com/newcars/manage/carpic/20060320033213720_79057_New.jpg","http://db.chinacars.com/newcars/manage/carpic/20060320033201298_22333_New.jpg");
    var i=0;
    document.getElementById("imgFld").src=arrImg[0]; document.getElementById("imgFld").style.cursor="hand";
    document.getElementById("imgFld").attachEvent('onclick',function(){window.open(document.getElementById("imgFld").src);});function prevImg() {  
      if(i==0) return;
      i--;
      document.getElementById("imgFld").src=arrImg[i];
    }function nextImg() {  
      if(i==arrImg.length-1) return;
      i++;
      document.getElementById("imgFld").src=arrImg[i];}
    </script>
    </body>