jQuery Mobile 是一款優秀的移動端開發框架，它提供了許多功能實用的組件來幫助我們更加輕松地構建出漂亮的移動應用。其中，圖片切換組件也是非常重要的，今天我們就來學習一下如何使用 jQuery Mobile 實現圖片切換。
首先，我們需要在頁面中引入 jQuery Mobile 的庫文件以及我們需要使用到的 jQuery 插件。代碼如下：
<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>` 元素，它表示我們的頁面是一張 jQuery Mobile 頁面。接著，在這個元素中再定義一個帶有 `data-role="content"` 屬性的 `
` 元素，用來放置圖片。最后，在這個元素中添加一個 `data-cycle-carouse` 屬性，告訴 jQuery Cycle2 插件我們要使用它來實現圖片切換。代碼如下：
<div data-role="page">
<div data-role="content">
<div data-cycle-carousel>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
</div>
</div><style>
[data-cycle-carousel] img {
width: 100%;
height: auto;
border: 5px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}
</style>