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

时间：2022-11-28 22:14:42
网上半天也没有查到,请帮忙!

我有多张图片,想存到数组里.

页面上有两个按钮,一个是上一张,一个是下一张.

我点一下,图片就变掉.

还有就是图片有个连接,就是接接到他们自身,

例如<a href=images/1.gif><img src=images/1.gif></a>

8 个解决方案

#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];
}
</script>
</body>

#2

没看清楚需求,还要打开自己啊
<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>

#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.src = imgArray[currentIndex];
    img1.parentNode.href = imgArray[currentIndex];
  }
}
function prevImg() {
  if (currentIndex > 0){
    currentIndex --;
    img1.src = imgArray[currentIndex];
    img1.parentNode.href = imgArray[currentIndex];
  }

}
//-->
</SCRIPT>

#4

再简化一下：
<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>

#5

<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>

#6

谢谢各位老位老大帮忙!

第一位:有一个小BUG,如果我显示第三张图片的时候,我点一图片,他会打开三个窗口
第二位:页面打开初始化的时候.我想显示数组里的第一张图片,调试半天,实在调试不出来
第三位:图片没有连接

我自己结合三位老大的东东.调试好了.

再次谢谢三位老大

#7

我已经调试通过了,现在想加一个东东,就是当前图片是第几张图片?

<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>

#8

第几张图片已经调试出来

#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];
}
</script>
</body>

#2

没看清楚需求,还要打开自己啊
<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>

#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.src = imgArray[currentIndex];
    img1.parentNode.href = imgArray[currentIndex];
  }
}
function prevImg() {
  if (currentIndex > 0){
    currentIndex --;
    img1.src = imgArray[currentIndex];
    img1.parentNode.href = imgArray[currentIndex];
  }

}
//-->
</SCRIPT>

#4

再简化一下：
<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>

#5

<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>

#6

谢谢各位老位老大帮忙!

第一位:有一个小BUG,如果我显示第三张图片的时候,我点一图片,他会打开三个窗口
第二位:页面打开初始化的时候.我想显示数组里的第一张图片,调试半天,实在调试不出来
第三位:图片没有连接

我自己结合三位老大的东东.调试好了.

再次谢谢三位老大

#7

我已经调试通过了,现在想加一个东东,就是当前图片是第几张图片?

<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>

#8

第几张图片已经调试出来
标签：

相关文章