MUI-圖片輪播控制元件
阿新 • • 發佈：2019-01-25
圖片輪播繼承自slide外掛，因此其DOM結構、事件均和slide外掛相同；
在MUI框架中針對圖片的輪播做了一個簡單的封裝。
DOM結構
預設不支援迴圈播放，DOM結構如下：假設當前圖片輪播中有1、2、3、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：<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）非迴圈模式：左劃沒有任何反應。如需要翻到第一張，則需要一直右劃到第一張才行。
當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是同樣問題；這個問題的實現需要通過.mui-slider-loop類及DOM節點來控制；
若要支援迴圈，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張圖片，圖片順序變為：4、1、2、3、4、1，程式碼示例如下：
<div JS Method
mui框架內建了圖片輪播外掛，通過該外掛封裝的JS API，使用者可以設定是否自動輪播及輪播週期，如下為程式碼示例：//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自動輪播週期，若為0則不自動播放，預設為0；
});如果希望手動去控制輪播。則將interval的引數值設為0即可。
若要跳轉到第x張圖片，則可以使用圖片輪播外掛的gotoItem方法，例如：
//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；//獲得slider外掛物件
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自動輪播週期，若為0則不自動播放，預設為0；
});下面是一個完整的例子：
<!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>具體效果圖如下所示：
