编写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>
显示效果:
?
|