jQuery是一種JavaScript庫，可以簡化HTML與JavaScript之間的交互、動畫、事件處理并且在復雜的應用程序中實現AJAX。其中，jQuery1.8版本提供了非常便捷的圖片預覽功能，讓用戶可以在網頁中更加方便地查看圖片。

// HTML 結構
<div class="preview">
<img src="preview.jpg" />
</div>
<ul class="thumbnails">
<li><a href="large1.jpg"><img src="thumbnail1.jpg" /></a></li>
<li><a href="large2.jpg"><img src="thumbnail2.jpg" /></a></li>
<li><a href="large3.jpg"><img src="thumbnail3.jpg" /></a></li>
</ul>
// jQuery 代碼
$(function() {
var previewWraper = $('.preview');
var preview = previewWraper.find('img');
// 預覽圖片
function previewImage(src) {
preview.attr('src', src);
}
// 縮略圖點擊事件
$('.thumbnails img').click(function() {
var src = $(this).attr('src').replace('thumbnail', 'large');
previewImage(src);
});
});

首先，在HTML中創建一個用于顯示預覽圖片的容器

，并且在其內部創建一個標簽用于顯示圖片內容。接下來，在縮略圖列表

中，創建多個包含圖片的
• 標簽，并且將每張縮略圖都設為標簽的背景。在jQuery代碼中，定義previewWraper變量表示預覽圖片的容器，preview變量表示用于顯示預覽圖片的標簽。接著，定義previewImage方法用于預覽對應的大圖。最后，對于每張縮略圖都綁定了click事件，在點擊時調用previewImage方法，傳入對應的大圖路徑即可。