jQuery Mobile 是一款基于 jQuery 的移動(dòng)端框架，它提供了很多方便的組件。其中，圖片瀏覽組件是常用的一種，可以幫助開(kāi)發(fā)者在移動(dòng)端實(shí)現(xiàn)類(lèi)似于相冊(cè)的瀏覽體驗(yàn)。

首先在 HTML 文件中，我們需要引入 jQuery Mobile 的資源：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" >
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

接著，在需要添加圖片瀏覽的頁(yè)面中添加一個(gè)容器，通常是一個(gè) div 標(biāo)簽：

<div data-role="page">
...
<div id="image-gallery" data-role="popup">
<img src="#">
</div>
</div>

其中，data-role="page" 的 div 用于定義一個(gè) jQuery Mobile 頁(yè)面，而 data-role="popup" 的 div 則用于定義一個(gè)彈出窗口，用于顯示大圖。img 標(biāo)簽的 src 屬性暫時(shí)先設(shè)置為 "#"，后續(xù) jQuery 代碼中再進(jìn)行設(shè)置。

最后，在 JavaScript 文件中使用 jQuery 選擇器和圖片地址數(shù)組來(lái)實(shí)現(xiàn)圖片瀏覽功能：

$(function() {
var imageUrls = ['img1.jpg', 'img2.jpg', 'img3.jpg']; // 圖片地址數(shù)組
$.each(imageUrls, function(index, value) {
// 動(dòng)態(tài)創(chuàng)建圖片元素，并添加到頁(yè)面上
var img = '<img src="' + value + '">';
$('#image-gallery').append(img);
// 為圖片元素綁定點(diǎn)擊事件，顯示彈出窗口
$('#image-gallery img').eq(index).on('tap', function() {
$(this).parent().popup('open');
});
});
});

在以上代碼中，我們使用了 $ 函數(shù)來(lái)獲取頁(yè)面中的 #image-gallery 元素，并使用 append 方法向其中添加 img 元素。接著，我們?yōu)槊總€(gè) img 元素綁定了 tap 事件，在事件響應(yīng)函數(shù)中使用 popup 方法調(diào)用彈出窗口，并將當(dāng)前 img 元素的父元素傳入。

這樣，我們就使用 jQuery Mobile 實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖片瀏覽功能，讓移動(dòng)端用戶可以方便地查看圖片。