html代码：  
           
       
Snapshots
  
     
    
      
                        
    
      
                        
    
      
                        
    
      
                        
  
     

css：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-style: none;}#imagegallery {  list-style: none;}#imagegallery li {  display: inline;}#imagegallery li a img {  border: 0;}

function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {    parent.appendChild(newElement);  } else {    parent.insertBefore(newElement,targetElement.nextSibling);  }}function preparePlaceholder() {  if (!document.createElement) return false;  if (!document.createTextNode) return false;  if (!document.getElementById) return false;  if (!document.getElementById("imagegallery")) return false;  var placeholder = document.createElement("img");  placeholder.setAttribute("id","placeholder");  placeholder.setAttribute("src","images/placeholder.gif");  placeholder.setAttribute("alt","my image gallery");  var description = document.createElement("p");  description.setAttribute("id","description");  var desctext = document.createTextNode("Choose an image");  description.appendChild(desctext);  var gallery = document.getElementById("imagegallery");  insertAfter(placeholder,gallery);  insertAfter(description,placeholder);}function prepareGallery() {  if (!document.getElementsByTagName) return false;  if (!document.getElementById) return false;  if (!document.getElementById("imagegallery")) return false;  var gallery = document.getElementById("imagegallery");  var links = gallery.getElementsByTagName("a");  for ( var i=0; i < links.length; i++) {    links[i].onclick = function() {      return showPic(this);    }    links[i].onkeypress = links[i].onclick;  }}function showPic(whichpic) {  if (!document.getElementById("placeholder")) return true;  var source = whichpic.getAttribute("href");  var placeholder = document.getElementById("placeholder");  placeholder.setAttribute("src",source);  if (!document.getElementById("description")) return false;  if (whichpic.getAttribute("title")) {    var text = whichpic.getAttribute("title");  } else {    var text = "";  }  var description = document.getElementById("description");  if (description.firstChild.nodeType == 3) {    description.firstChild.nodeValue = text;  }  return false;}addLoadEvent(preparePlaceholder);addLoadEvent(prepareGallery);