jQuery Mobile 是一個(gè)移動(dòng)設(shè)備優(yōu)化的 HTML5 UI 框架，讓我們可以很方便地在移動(dòng)設(shè)備上創(chuàng)建交互性強(qiáng)的網(wǎng)站和應(yīng)用。在 jQuery Mobile 中，我們可以使用簡(jiǎn)單的代碼實(shí)現(xiàn)滑動(dòng)圖片的效果。

<div data-role="page">
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true">
<li>
<img src="slide1.jpg" alt="slide1">
</li>
<li>
<img src="slide2.jpg" alt="slide2">
</li>
<li>
<img src="slide3.jpg" alt="slide3">
</li>
<li>
<img src="slide4.jpg" alt="slide4">
</li>
</ul>
</div>
</div>

以上代碼中，我們?cè)谝粋€(gè)數(shù)據(jù)角色為 page 的 div 容器中創(chuàng)建了一個(gè)數(shù)據(jù)角色為 listview 的 ul 列表。

在 ul 中，我們列出了需要滑動(dòng)的幾張圖片。對(duì)于每張圖片，我們使用一個(gè) li 包裹，其中 img 標(biāo)簽的 src 屬性設(shè)為圖片的 URL， alt 屬性為圖片的名稱或描述。

當(dāng)這些圖片被包含在數(shù)據(jù)角色為 listview 的 ul 列表中時(shí)，它們就會(huì)變成輪播圖了。我們可以輕松地使用滑動(dòng)手勢(shì)切換到不同的圖片，這是一個(gè)非常便捷的功能。