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;

View Code

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;
}

layout.css