JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果

<div id="content">
            <h1>Photos of the band</h1>
            <ul id="imagegallery">
                <li>
                    <a href="images/photos/basshead.jpg" title="我的图片1"><img src="images/photos/thumbnail_basshead.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/bassist.jpg" title="我的图片2"><img src="images/photos/thumbnail_bassist.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/drummer.jpg" title="我的图片3"><img src="images/photos/thumbnail_drummer.jpg" alt="漂亮的图片"/></a>
                </li>
                <li>
                    <a href="images/photos/lineup.jpg" title="我的图片4"><img src="images/photos/thumbnial_lineup.jpg" alt="漂亮的图片"/></a>
                </li>
            </ul>
        </div>

/***********************显示图片*********************/
function showPic(whichpic){
    //浏览器  对象检测
    if(!document.getElementById("placeholder")) return false;
    
    //获取元素
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    
    //显示图片
    placeholder.setAttribute("src",source);                             //把当前图片的src赋值给占位符图片
    
    //设置显示描述图片的文字
    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;
}


/***************创建定位符预装图片***********************/
function preparePlaceholder(){
    //浏览器对象检测
    if(!document.getElementById) return false;
    if(!document.createTextNode) return false;
    if(!document.createElement) return false;
    if(!document.getElementById("imagegallery")) return false;
    
    //设置新创建元素的属性
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","./images/placeholder.png");
    placeholder.setAttribute("alt","我的图片");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var desctext = document.createTextNode("请选择一张图片：");
    description.appendChild(desctext);
    
    //挂载显示新创建元素
    var gallery = document.getElementById("imagegallery");
    insertAfter(description,gallery);
    insertAfter(placeholder,description);
}




/***************点击，显示图片*************************/
function prepareGallery(){
    //对象检测
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    
    //获取元素
    var gallery = document.getElementById("imagegallery");
    var links = document.getElementsByTagName("a");
    
    //显示当前图片（for循环实现）
    for(var i=0; i<links.length; i++){
        links[i].onclick = function(){
            return showPic(this);
        }
    }
}



addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);