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

最新推荐文章于 2025-10-07 05:53:42 发布

原创最新推荐文章于 2025-10-07 05:53:42 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

这篇博客介绍了一个使用JavaScript编写的简单图片浏览器，通过按钮控制显示不同图片。代码中定义了图片数组，并为第一幅、前一幅、后一幅和最后一幅按钮分配了点击事件，实现图片的切换功能。

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

显示效果：