body{ font-family:"Arial",serif;color:#333; background#ccc; margin:1em 10%;}
h1{color:#333; background:transparent;}
a{ color:#333; font-weight:bold; text-decoration:none;}
ul{padding:0;}
li{ float:left; padding:1em; list-style:none; border-right:solid 1px #ccc;}
#imagegallery:after{ content: "."; clear:both; height:0; visibility:hidden; display:block; }
#placeholder{ width:400px; height:300px;}
img{ display:block; clear:both}
.icon{display:inline-block;width:16px;height:16px; vertical-align:top; background:url(smicon.png) no-repeat; padding-left:10px;}<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Image Gallery</title> <script src="test.js"></script> <link href="test.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li > <a href="DSC00034.jpg" title="A fireworks display" >Fireworks</a> </li> <li> <a href="DSC00035.jpg" title="A cup of black coffee" >Coffee</a> </li> <li> <a href="DSC00045.jpg" title="A red.red rose" >Rose</a> </li> <li> <a href="DSC00033.jpg" title="The famous clock">Big Ben</a> </li> </ul> </body> </html>
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(){ //DOM
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","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);
/* document.getElementsByTagName("body")[0].appendChild(placeholder);//document.body.appendChild(palceholder);
document.getElementsByTagName("body")[0].appendChild(description);//document.body.appendChild(description); */
var gallery = document.getElementById("imagegallery")
//gallery.parentElement.insertBefore(placeholder,gallery);
//gallery.parentElement.insertBefore(descriptio,gallery);
insertAfter(placeholder,gallery);
insertAfter(description,gallery);
}
function showPic(whichpic) { //点击切换图片
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source); //完全可以用 placeholder.src = source 来代替该条语句
if(document.getElementById("description")) {
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
//alert( description.nodeValue);
//alert(description.firstChild.nodeValue);
//等价于alert( description.childNodes[0].nodeValue);
description.firstChild.nodeValue=text;
}
return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);效果预览：
原文：http://xuyran.blog.51cto.com/11641754/1783589