js入门小项目——实现一个非常简单的图片库。。。其实就是做一个可以切换图片的网页，先上代码：
1）html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Image Gallery</title> <script type="text/javascript" src="scripts/showPic.js"></script> <link rel="stylesheet" href="styles/layout.css" type="type/css" media="screen"/> </head> <body> <h1>Famous Paintings</h1> <ul> <li> <a href="images/snowstorm.jpg" οnclick="showPic(this); return false;" title="snow storm by Turner"> Snowstorm</a> </li> <li> <a href="images/sunflowers.jpg" οnclick="showPic(this); return false;" title="sunflowers by van Gogh"> Sunflowers</a> </li> <li> <a href="images/selfportrait.jpg" οnclick="showPic(this); return false;" title="double self portrait by Schiller"> Selfportrait</a> </li> </ul> <img id="placeholder" src="images/placeholder.jpg"/> <p id="description">Choose an image.</p> </body> </html>2）css： body{ font-family:"Helvetica","Arial",sans-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-style:none; }3）js： function showPic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source);//注意source不要用"" var text=whichpic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=text; } /* function countBodyChildren(){ var body_element=document.getElementsByTagName("body")[0]; alert(body_element.childNodes.length); } window.οnlοad=countBodyChildren; */效果（CSS似乎有点问题。。）：
