圖片輪播繼承自slide插件，因此其DOM結構、事件均和slide插件相同； 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張圖片； 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片； 當顯示第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參數設為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； }); ~~~