jQuery Mobile 是一款非常流行的前端框架，它提供了各種用戶界面組件來方便開發人員進行移動應用程序的開發。其中一個重要的組件就是幻燈片。
使用 jQuery Mobile 實現幻燈片非常簡單。我們首先需要引入 jQuery 和 jQuery Mobile 的庫文件。然后，我們可以使用 data-role 屬性將一個 div 元素定義為幻燈片容器，再在內部添加多個帶有 data-role="slide" 屬性的 div 元素。代碼如下:
<!DOCTYPE html> <html> <head> <title>幻燈片演示</title> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>幻燈片演示</h1> </div> <div data-role="main" class="ui-content"> <div data-role="page" id="slideshow" data-theme="a"> <div data-role="header"> <h1>幻燈片演示</h1> </div> <div data-role="content"> <div data-role="slideshow"> <div data-role="slide"> <h3>第一張幻燈片</h3> <p>一些描述文字…</p> </div> <div data-role="slide"> <h3>第二張幻燈片</h3> <p>一些描述文字…</p> </div> <div data-role="slide"> <h3>第三張幻燈片</h3> <p>一些描述文字…</p> </div> </div> </div> </div> </div> </div> </body> </html>
最后，我們還可以通過 data-options 屬性自定義幻燈片的一些參數。比如自動播放、播放速度等。代碼如下:
<div data-role="slideshow" data-options="{'auto': true, 'speed': 500}">
<!-- 幻燈片內容 -->
</div>總之，使用 jQuery Mobile 實現幻燈片非常簡單，只需要引入庫文件，并按照上述步驟定義幻燈片容器和幻燈片內容即可。通過自定義數據屬性和數據選項屬性，我們還可以實現更加靈活豐富的幻燈片效果。
下一篇css圖片晃動動畫