說到JavaScript，大家都知道它的強大之處在于可以用來實現(xiàn)豐富的交互效果。其中，圖片查看功能是Web開發(fā)人員經(jīng)常需要實現(xiàn)的一個常用功能，如何使用JavaScript來實現(xiàn)呢？本文將為大家介紹。

首先，我們需要明確一下展示圖片的方式。最常見的方式應該就是以縮略圖的形式供用戶選擇，然后點擊某一個縮略圖可查看對應的大圖。舉個例子，比如淘寶中的商品圖片就是這種方式：

<ul class="thumbnails">
<li><a href="big-img1.jpg"><img src="thumbnail1.jpg"></a></li>
<li><a href="big-img2.jpg"><img src="thumbnail2.jpg"></a></li>
<li><a href="big-img3.jpg"><img src="thumbnail3.jpg"></a></li>
</ul>

可以看到，這里使用了一個無序列表來存放縮略圖，并且將每一個縮略圖都以鏈接的形式包裝起來，并將鏈接的href屬性指向?qū)拇髨D地址。

那么如何實現(xiàn)點擊縮略圖后展示大圖的功能呢？答案就是利用事件監(jiān)聽器。通過監(jiān)聽每一個縮略圖連接的click事件，當用戶點擊某一個縮略圖后，我們就可以獲取到該縮略圖對應的大圖地址，進而展示出來。

// 獲取所有的縮略圖鏈接
var thumbnailLinks = document.querySelectorAll('.thumbnails a');
// 遍歷每一個鏈接
for(var i=0;i<thumbnailLinks.length;i++) {
// 監(jiān)聽每一個鏈接的click事件
thumbnailLinks[i].addEventListener('click', function(event) {
// 阻止默認事件
event.preventDefault();
// 獲取當前鏈接對應的大圖地址
var bigImgUrl = this.href;
// 展示大圖
showBigImage(bigImgUrl);
});
}

可以看到，我們通過querySelectorAll方法獲取了所有的縮略圖鏈接，然后使用for循環(huán)遍歷每一個鏈接，為其添加了一個click事件監(jiān)聽器。當用戶點擊某一個鏈接后，我們通過阻止默認事件來防止頁面跳轉(zhuǎn)，然后獲取到該鏈接對應的大圖地址，并最終展示大圖。

展示大圖可以使用js代碼動態(tài)創(chuàng)建一個標簽，并將其src屬性指向?qū)拇髨D地址。一般在頁面中事先定義好一個容器元素，然后將動態(tài)創(chuàng)建的標簽追加到該容器元素的末尾。舉個例子：

// 定義一個容器元素
var container = document.getElementById('big-image-container');
// 展示大圖的函數(shù)
function showBigImage(bigImgUrl) {
// 先刪除容器元素中已存在的標簽（如果有的話）
if(container.lastChild) {
container.removeChild(container.lastChild);
}
// 動態(tài)創(chuàng)建標簽
var bigImg = document.createElement('img');
bigImg.src = bigImgUrl;
// 將標簽添加到容器元素中
container.appendChild(bigImg);
}

上面的代碼中，我們首先獲取了一個id值為big-image-container的容器元素，然后定義了一個展示大圖的函數(shù)showBigImage，該函數(shù)將大圖地址作為參數(shù)傳入。函數(shù)首先判斷容器元素中是否已經(jīng)存在標簽，如果存在的話，先將其刪除；然后動態(tài)創(chuàng)建一個標簽，并將其src屬性指向?qū)拇髨D地址。最后，將創(chuàng)建出來的標簽追加到容器元素中。

至此，使用JavaScript實現(xiàn)圖片查看的功能就完成了。