圖片輪播繼承自slide外掛,因此其DOM結構、事件均和slide外掛相同;

在MUI框架中針對圖片的輪播做了一個簡單的封裝。

DOM結構

預設不支援迴圈播放,DOM結構如下:
<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>
假設當前圖片輪播中有1、2、3、4四張圖片,從第1張圖片起,依次向左滑動切換圖片,當切換到第4張圖片時,繼續向左滑動,接下來會有兩種效果:

(1)迴圈模式:繼續左劃則顯示第一張。

(2)非迴圈模式:左劃沒有任何反應。如需要翻到第一張,則需要一直右劃到第一張才行。
當顯示第1張圖片時,繼續右滑是否顯示第4張圖片,是同樣問題;這個問題的實現需要通過.mui-slider-loop類及DOM節點來控制;

若要支援迴圈,則需要在.mui-slider-group節點上增加.mui-slider-loop類,同時需要重複增加2張圖片,圖片順序變為:4、1、2、3、4、1,程式碼示例如下:

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支援迴圈,需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支援迴圈,需要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>

JS Method

mui框架內建了圖片輪播外掛,通過該外掛封裝的JS API,使用者可以設定是否自動輪播及輪播週期,如下為程式碼示例:
//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自動輪播週期,若為0則不自動播放,預設為0;
});
上面interval的單位是毫秒。

如果希望手動去控制輪播。則將interval的引數值設為0即可。

若要跳轉到第x張圖片,則可以使用圖片輪播外掛的gotoItem方法,例如:

//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳轉到第index張圖片,index從0開始;
注意:mui框架會預設初始化當前頁面的圖片輪播元件;若輪播元件內容為js動態生成時(比如通過ajax動態獲取的營銷資訊),則需要在動態DOM生成後,手動呼叫圖片輪播的初始化方法;程式碼如下:
//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自動輪播週期,若為0則不自動播放,預設為0;
});
當然根據上面的介紹。我們也可以使用js來自定義按鈕控制輪播的上一頁和下一頁。

下面是一個完整的例子:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--標準mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定義的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">圖片輪播</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<li id="switch" class="mui-table-view-cell">
					定時輪播
					<div class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
		</div>
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 額外增加的一個節點(迴圈輪播:第一個節點是最後一張輪播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/yuantiao.jpg">
					</a>
				</div>
				<!-- 第一張 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/shuijiao.jpg">
					</a>
				</div>
				<!-- 第二張 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/muwu.jpg">
					</a>
				</div>
				<!-- 第三張 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/cbd.jpg">
					</a>
				</div>
				<!-- 第四張 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../images/yuantiao.jpg">
					</a>
				</div>
				<!-- 額外增加的一個節點(迴圈輪播:最後一個節點是第一張輪播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../images/shuijiao.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack:true //啟用右滑關閉功能
			});
			var slider = mui("#slider");
			document.getElementById("switch").addEventListener('toggle', function(e) {
				if (e.detail.isActive) {
					slider.slider({
						interval: 5000
					});
				} else {
					slider.slider({
						interval: 0
					});
				}
			});
		</script>
	</body>

</html>

具體效果圖如下所示: