目的：點擊一張小圖片會在下方展示出大圖片，大圖片下方會有該圖片的標題

實現：讓小圖片的href賦值給Img的src，讓title賦值給innerHTML

註意：這裏的圖片有很多，把它們當成一個數組進行操作即可

<ul id="imagegallery">
<li>
<a href="../images/11.jpg" title="美女A">
<img src="../images/1-small.jpg" alt="美女1">
</a>
</li>
<li>
<a href="../images/22.jpg" title="美女B">
<img src="../images/2-small.jpg" alt="美女2">
</a>
</li>
<li>
<a href="../images/33.jpg" title="美女C">
<img src="../images/3-small.jpg" alt="美女3">
</a>
</li>
<li>
<a href="../images/44.jpg" title="美女D">
<img src="../images/4-small.jpg" alt="美女4">
</a>
</li>
</ul>
<div class="clear"></div>
<img src="../images/placeholder.png" width="450" id="image" height="250" />
<p id="des">選擇一個圖片</p>

　　下面是實現功能的javascript代碼

<script>
//需求：點擊小圖片，改變下邊大圖片的src，為它賦值a鏈接的href屬性值
//讓p標簽的innerHTML屬性值變成a標簽的title屬性值
//獲取事件源和圖片
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
var img = document.getElementById("image");
var des = document.getElementById("des");
 
//綁定事件
//以前是一個一個的綁定，現在是一個數組 for循環綁定
for (var i = 0; i < aArr.length; i++) {
    aArr[i].onclick =function (){
        //書寫事件驅動程序
        //修改書寫
        //this指的是函數調用者，和i沒關系，所以不會出錯
        img.src = this.href;
        // img.src = aArr[i].href;
        des.innerHTML = this.title;
        return false;
    }
}
 
</script>

JS之美女相冊