目录
图库（点击链接加载对应的图片）
该图库不会在另外一个页面打开图片，此处只实现案例思想，具体图库样式从简。
效果图
实现思路
建立有一个对象作为参数的函数，获取点击对象–（链接元素）里的href属性以及title属性，并将对应的两个属性放置在对应id的容器内src和文本节点。通过点击触发函数，无论调用函数是否成功，都会因为return false 而点击链接跳到新页面查看图片的效果失效。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 300px;
height: 220px;
}
li{
width: 100px;
text-align: center;
list-style: none;
float: left;
}
</style>
<script>
function showPic(whichPic){
var source = whichPic.getAttribute("href");//获取链接
var title = whichPic.getAttribute("title");
var obj = document.getElementById("showBox");
var showTitle = document.getElementById("showTitle");
obj.setAttribute("src",source);//将对应链接放到展示处
showTitle.textContent = title;
}
</script>
</head>
<body>
<li><a href="img/1.jpg" title="img 1" onclick="showPic(this);return false;">img 1</a></li>
<li><a href="img/2.jpg" title="img 2" onclick="showPic(this);return false;">img 2</a></li>
<li><a href="img/3.jpg" title="img 3" onclick="showPic(this);return false;">img 3</a></li>
<br>
<div>
<img id="showBox" src="img/1.jpg" alt="img show">
<p>显示图片标题：<span id="showTitle"></span></p>
</div>
</body>
</html>此处的title，通过textContent写进span标签。也可以用innerHTML，可是个人不建议。