JavaScript網站設計實踐（五）編寫photos.html頁面，實現點擊縮略圖顯示大圖的效果

一、photos.html頁面，點擊每一張縮略圖，就在占位符的位置那里，顯示對應的大圖。

看到的頁面效果是這樣的：

 

1、實現思路

這個功能在之前的JavaScript美術館那里已經實現了。

首先在頁面中使用ul列表顯示出所有的縮略圖，然后使用JavaScript，for循環檢查出當前點擊的是哪一張圖片，最后把這張圖片給顯示出來。

用到三個函數：顯示圖片函數、創建占位符預裝圖片、點擊顯示圖片

2、代碼

（1）制作四張400px*300px的圖片，然后把這四張圖片縮小到100*100px的縮略圖。把這八張圖片都放進images/photos的文件夾里。

（2）新建一個photos.html

首先，把template.html的代碼拷貝到photos.html中；

然后，講div為content的部分替換為如下：

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

 

3、修改webdesign.css樣式

追加如下樣式：#imagegallery li{

                      display:inline;      

                    }

 

4、創建photos.js。用來編寫photos頁面的js效果

/***********************顯示圖片*********************/
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);

 

5、打開瀏覽器瀏覽，看到效果，photos頁面ok啦！

二、學與思

1、li的樣式設置為inline

#imagegallery li{

                      display:inline;      

                    }

塊級元素變成行內元素，這樣子所有的li就能水平顯示。

2、nodeType==3為文本節點類型

description.firstChild.nodeType == 3