编写JavaScript程序实现：图像浏览器的功能

编写JavaScript程序实现：图像浏览器的功能，如下图：代码实现：<!doctype html><html lang="en"><head><title>图片浏览器</title></head><body><table><tr><td><input type="butt

aigo-2021

2305人浏览 · 2022-04-25 23:27:59

aigo-2021 · 2022-04-25 23:27:59 发布

编写JavaScript程序实现：图像浏览器的功能，如下图：

代码实现：

<!doctype html>
<html lang="en">
 <head>
  <title>图片浏览器</title>
 </head>
 <body>
  <table>
  <tr>
	<td><input type="button" value="第一幅" id="1"></td>
	<td><input type="button" value="前一幅" id="2"></td>
	<td><input type="button" value="后一幅" id="3"></td>
	<td><input type="button" value="最后一幅" id="4"></td>
  </tr>
</table>
	<img src="8483763.jpg" width="250" height="180" id="img">//设置默认为第一幅图片
<script>
  var count=0;
  	var imgName=["8483763.jpg","8492815.jpg","8500947.jpg"];//图片路径可自行更改，该处使用的为相对路径
	    var t1=document.getElementById("1");
        var t2=document.getElementById("2");
		var t3=document.getElementById("3");
		var t4=document.getElementById("4");

		var img=document.getElementById("img");
		//后一张
		t3.onclick=function(){
			count++;
            if (count>=imgName.length) {
				count=0;//从0开始
          }
            img.src=imgName[count];           
        };
		  //前一张
		t2.onclick=function(){
			count--;
            if (count<0) {
               count=imgName.length-1;//从0开始
            }
            img.src=imgName[count];           
        };
		  //第一张
		t1.onclick = function () {
			count=0;
			img.src=imgName[count];
		};
		//最后一张
		t4.onclick = function () {
			count=imgName.length-1;
			img.src=imgName[count];
		};
       </script>
 </body>
</html>

显示效果：