<!-- 新手刚开始学JS，每天坚持写点东西
坚持下去，希望能有所进步 。 加油~~ -->
<!DOCTYPE html>
<html>
<head>
<title>创建一个图片库</title>
<meta charset="gb2312" />
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<h1>创建一个图片库</h1>
<ul>
<li><a href="美图/1.JPG" title="这是一只狐狸" onclick="showPic(this); return false;">狐狸</a></li>
<li><a href="美图/2.JPG" title="这是一个苹果" onclick="showPic(this);return false;">苹果</a></li>
<li><a href="美图/3.JPG" title="这是一盘" onclick="showPic(this);return false;">水果</a></li>
<li><a href="美图/4.JPG" title="这是一朵花" onclick="showPic(this);return false;">花朵</a></li>
<li><a href="美图/5.JPG" title="这是杨岢" onclick="showPic(this);return false;">傻逼</a></li>
</ul>
<img id="pic_xianshi" src="" alt="图片将在这里显示" width="600" height="400">
<p id="description">图片将在这里显示</p>
<script src="js/showPic.js">
</script>
</body>
</html>
-------以下是javascript代码-----------
window.onload = function{
function showPic(whichpic){
var source = whichpic.getAttribute("href"); //声明source，从函数中获取href
var oDis = document.getElementsById("pic_xianshi"); //声明oDis, 它将代表 id为pic_xianshi这个元素
oDis.setAttribute("src",source); //设置oDis里的属性和值 分别是 "src", source是“href”所以不用加引号了
//图片跟随有了，现在继续把文字接上
var text = whichpic.getAttribute("title"); //声明 text，从函数中获取title
var description = document.getElementById("description"); //声明description, 从文件获取ID为description的元素
description.firstChild.nodeValue = text ; //最终让description中第一个节点的值同步为text的信息
}
}
没有进行太多布局和编排。自己再把思路整理一下吧~~
看看跟着能不能实现简单的效果~~ ^_^ 加油