<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web相册</title>
</head>
<style type="text/css">
.img_border{
border: 3px solid #cd853f;
}
</style>
<script type="text/javascript">
var currentImgIndex=-1;//相当于图片的序号
function showImg(index){
if(isNaN(index))return;
if(index<0||index>2)return;
currentImgIndex=index;
var thumbList=document.getElementsByName("thumb");
var imgCanvas=document.getElementById("showImg");
switch(index){
case 0:
var _img=document.createElement("img");
imgCanvas.innerHTML=
"<img src='img/360.png' width='400' height='300'/>";
thumbList[0].className="img_border";
thumbList[1].className=thumbList[2].className="";
break;
case 1:
imgCanvas.innerHTML=
"<img src='img/baidu.png'width='400' height='300' />"
thumbList[1].className="img_border";
thumbList[0].className=thumbList[2].className="";
break;
case 2:
imgCanvas.innerHTML=
"<img src='img/sougou.png' width='400' height='300'/>";
thumbList[2].className="img_border";
thumbList[0].className=thumbList[1].className="";
break;
default:
imgCanvas.innerHTML=
"<img src='' width='400' height='300'/>"
}
}
function nextImg()
{
currentImgIndex++;
if(currentImgIndex>2) currentImgIndex=2;
showImg(currentImgIndex);
}
function preImg(){
currentImgIndex--;
if(currentImgIndex<0) currentImgIndex=0;
showImg(currentImgIndex);
}
</script>
<body>
<h2>缩略图</h2>
<table>
<tr>
<td><input type="button" value="<"onclick="preImg()"></td>
<td><img src="img/360.png" width="150" height="75" name="thumb"onclick="showImg(0)"></td>
<td><img src="img/baidu.png"width="150"height="65" name="thumb"onclick="showImg(1)"></td>
<td><img src="img/sougou.png"width="150"height="65"name="thumb"onclick="showImg(2)"> </td>
<td><input type="button"value=">" onclick="nextImg()"></td>
</tr>
</table>
<div id="showImg"class="show_img">
<img src="" width="400"height="300" />
</div>
</body>
</html>
