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 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>
具體效果圖如下所示: