JavaScript 建立简单的图片库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Image Gallery</title> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/boy.jpg" title="A hansome boy">Boy</a> </li> <li> <a href="images/cup.jpg" title="A cup of coffee"> Coffee </a> </li> <li> <a href="images/yellow.jpg" title="Two yellow guy"> Guy </a> </li> <li> <a href="images/fathergirl.gif" title="fight"> Father and girl </a> </li> </ul> </body> </html>
如上所示，在同目录中的images文件夹中放入你想展示的图片，利用href建立连接路径，如果想查看，点击便能下载图片观看，避免了一次下载缓冲过多的图片导致网页速度过慢，但这样做每次都得按back返回很不方便，我们要写个showPic函数使得用户点击连接能在当前页面展示图片：
1、通过增加一个“占位符”图片的方法来为图片预留一个浏览区域：
<li> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> </li>
通过更改images文件夹里的一张图片名字为placeholder作为占位符或者新加一张进去，用id表示出这张图片以便后边的设置它的链接属性。
2、在点击某个连接时，拦截网页的默认行为：
onclick="return false;"
3、在点击某个链接时，把"占位符“图片替换为与那个连接相对应的图片：
创建一个showPic.js文件，定义showPic函数如下：
function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); }
并在html里引用该函数：
<script type="text/javascript" src="scripts/showPic.js"></script>
于</body>之前；
最终代码：
1 //gallary.html 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="utf-8" /> 6 <title>Image Gallery</title> 7 </head> 8 <body> 9 <h1>Snapshots</h1> 10 <ul> 11 <li> 12 <a href = "http://www.baidu.com" onclick="return false;">Click me</a> 13 </li> 14 <li> 15 <a href="images/boy.jpg" onclick="showPic(this);return false;" title="A hansome boy">Boy</a> 16 </li> 17 <li> 18 <a href="images/cup.jpg" onclick="showPic(this); return false;" title="A cup of coffee"> Coffee </a> 19 </li> 20 <li> 21 <a href="images/yellow.jpg" onclick="showPic(this); return false;" title="Two yellow guy"> Guy </a> 22 </li> 23 <li> 24 <a href="images/fathergirl.gif" onclick="showPic(this); return false;" title="fight"> Father and girl </a> 25 </li> 26 <li> 27 <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 28 </li> 29 </ul> 30 <script type="text/javascript" src="scripts/showPic.js"></script> 31 </body> 32 </html> 33 //showPic.js 34 function showPic(whichpic) { 35 var source = whichpic.getAttribute("href"); 36 var placeholder = document.getElementById("placeholder"); 37 placeholder.setAttribute("src",source); 38 }
大功告成!
期间遇到了一直无法修改属性的问题：
主要问题是拼写错误。。。。
还有尽量避免在等号两旁加空格，貌似最后一次把空格都去掉后就成功了。。。也只能归咎是这个格式问题了
扩展：切换显示不同的文本？
1、childrenNodes 属性可以 用来获取任何一个元素的所有子元素
写一个查看子元素个数的函数：
1 function countBodyChildren() { 2 var body_element = document.getElementsByTagName("body")[0]; 3 alert ("the childNodes 's number: " + body_element.childNodes.length); 4 } 5 window.onload = countBodyChildren;
2、nodeType属性：返回节点的属性值：1为元素节点 2为属性节点 3为文本节点
3、nodeValue属性：获取一个节点的值：
注意：包含在<p>元素里面的文本是另一种节点，它是<P>元素的第一个子节点，因此想得到它的第一个子节点的nodevalue属性值：
alert（description.childnode[0].nodevalue);
用getAttribute来获得title的值，将它赋给description的第一个子节点的值，代码如下：
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var source_2 = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.childNodes[0].nodeValue = source_2;
}
最后，可以写一个样式表，将CSS代码存入layout.css文件，放入styles文件夹里，在<head>部分用一个<link>标签引用这文件：
<link rel="stylesheet" href="styles/layout.css"
全部代码如下：
showPic.js
gallary.html
body { font-family: "Helvetica","Arial",serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color:transparent; font-weight:bold; text-decoration: none; } ul { padding:0; } li { float: left; padding:1em; list-syle: none; } img { display:block; clear:both; }