》》mui--圖片輪播

mui框架內置了圖片輪播插件，經過該插件封裝的JS API，用戶能夠設定是否自動輪播及輪播週期，以下爲代碼示例：

//得到slider插件對象

var gallery = mui('.mui-slider');gallery.slider({

  interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；});

所以若但願圖片輪播不要自動播放，而是用戶手動滑動才切換，只須要經過如上方法，將slideshowDelay參數設爲0便可。

若要跳轉到第x張圖片，則可使用圖片輪播插件的gotoItem方法，例如：

//得到slider插件對象

var gallery = mui('.mui-slider');gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；

圖片輪播涉及的另一個問題：是否支持循環播放，好比有一、二、三、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：  

· 支持循環：左滑，直接切換到第1張圖片；

· 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；

  當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是一樣問題；這個問題的實現須要經過.mui-slider-loop類及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>

若要支持循環，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、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>

注意：mui框架會默認初始化當前頁面的圖片輪播組件；若輪播組件內容爲js動態生成時（好比經過ajax動態獲取的營銷信息），則須要在動態DOM生成後，手動調用圖片輪播的初始化方法；代碼以下：  

//得到slider插件對象var gallery = mui('.mui-slider');

gallery.slider({

  interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；});