原生js美图画廊-点击缩略图，出现对应的大图片及名称

<!-- <a href="www.baidu.com" id="link">百度</a> --> <!-- 测试文字链接，点击不跳转 -->
<a href="images/bread1.png" title="<b>面包圈1</b>">  
	<img src="images/bread1_50.png" alt="面包圈1">
</a>
<a href="images/bread2.png" title="面包圈2">
	<img src="images/bread2_50.png" alt="面包圈2">
</a>
<div><img src="" alt="" id="bigPic"></div>
<p id="imgName">我是图片名称</p>

div {
	width: 167px;
	height: 167px;
	border: 1px solid #ddd;
}

// var link = document.getElementById('link');  // 测试文字链接，点击不跳转
// link.onclick = function () {
// 	// console.log('点我了');    使用console看不到效果
// 	alert('点我了');
// 	return false;
// }

// 获取a元素
var links = document.getElementsByTagName('a');  
// console.log(links); //[a, a]
for (var i = 0; i < links.length; i++) {
	var link = links[i];
	// 点击a元素，链接不会跳转，且下方的div中显示点击图片的大图
	link.onclick = function () {
		// alert('点我了');
		var bigPic = document.getElementById('bigPic');
		// bigPic.src = link.href;  // onclick事件没有发生的时候，for循环已经遍历完成，点击gallery图库中的任意一个小图片都是最后一个链接href对应的大图
		bigPic.src = this.href;
		// p中显示对应图片的文字描述
		var imgName = document.getElementById('imgName');
		// console.dir(imgName.innerText);
		// imgName.innerHTML = this.title;  // 会解析html标签
		imgName.innerText = this.title;  // 不会解析html标签  转义符 < &lg  右键edit as html：<p id="imgName">&lt;b&gt;面包圈1&lt;/b&gt;</p>
		return false;
	}
}