2025-07-08

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

 

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

 

 

 

1、實現思路

 

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

 

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

 

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

 

2、代碼

 

(1)制作四張400px*300px的圖片,然後把這四張圖片縮小到100*100px的縮略圖。把這八張圖片都放進images/photos的文件夾裡。

 

(2)新建一個photos.html

 

首先,把template.html的代碼拷貝到photos.html中;

 

然後,講p為content的部分替換為如下:

 

復制代碼

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

        </p>

復制代碼

 

 

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *