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的部分替換為如下：

3、修改webdesign.css樣式

追加如下樣式：#imagegallery li{

                      display:inline;      

                    }

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

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

二、學與思

1、li的樣式設定為inline

#imagegallery li{

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

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