简单相册预览
完成功能如此图：
鼠标移到上方缩略图时，下方显示大图。
完整代码如下：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1</title>
<style type="text/css">
* { font-size: 12pt;font-family: Tahoma;text-align:left;margin:0;}
.img {cursor: pointer;height:90px;width:70px;margin:0;}
body {margin:10px;}
#gallary {float:left;height:90px;}
.bdr {border-top:4px dashed;border-bottom:4px dashed;clear:both;}
#show {position:absolute;top:200px;left:250px;background-color:#313131;padding:10px 10px
10px 10px;}
#showpic {cursor:pointer; margin-bottom:5px;}
#prev,#next {cursor:pointer;color:#FFFAFA;font-weight:bold;}
</style>
<script type="text/javascript">
var images = [];
function init() {
var imgArr = document.getElementsByTagName("img");
for (var i=0; i<imgArr.length; i++) {
if (imgArr[i].className == "img") {
imgArr[i].onmouseout = function(){event.srcElement.style.border="0px"};
images.push(imgArr[i]);
addEventListener(imgArr[i],"mouseover",handleEvent);
}
}
}
function addEventListener(ele,type,func) {
//兼容火狐
if (ele.addEventListener) ele.addEventListener(type,func,false);
else ele.attachEvent("on"+type,func);
}
function handleEvent(evt) {
//兼容火狐
var event = window.event?window.event:evt;
var target = event.target?event.target:event.srcElement;
target.style.border="1px solid blue";
for (var i=0;i<images.length;i++)
if (images[i] == target) break;
setTimeout(function() {go(i);},200);
}
function go(i) {
$("showpic").src = images[i].src;
$("show").style.display = "";
var next = (i+1)%images.length;
var prev = (i-1+images.length)%images.length;
$("prev").onclick = function() {setTimeout(function(){go(prev);},200);};
$("next").onclick = function() {setTimeout(function(){go(next);},200);};
}
function $(id) {return document.getElementById(id);}
function hide() {$("show").style.display="none";}
</script>
</head>
<body onload=init()>
<div class="bdr"></div>
<div id="gallary">
<img class="img" src="1.jpg" alt="" />
<img class="img" src="2.jpg" alt="" />
<img class="img" src="3.jpg" alt="" />
<img class="img" src="4.jpg" alt="" />
<img class="img" src="5.jpg" alt="" />
<img class="img" src="6.jpg" alt="" />
<img class="img" src="7.jpg" alt="" />
</div>
<div class="bdr"></div>
<div id="show" style="display:none">
<img id="showpic" src="" alt="" onclick="hide()" />
<div>
<span id="prev">prev</span>
<span id="next">next</span></div>
</div>
</body>
</html>
