MUI學習03-滾動圖（幻燈片）及菜單項（九宮格）

<!--標准mui.css-->
引入CSS：<link rel="stylesheet" href="../css/mui.min.css">

HTML代碼如下：

 <!--滾動圖（幻燈片）-->

<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="../images/nynav03.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="../images/nynav01.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="../images/nynav02.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="../images/nynav03.jpg" /></a></div>
        <!--支持循環，需要重復圖片節點-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/nynav01.jpg" /></a></div>
      </div>
    </div>

JS代碼如下：

<script src="../js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            //獲得slider插件對象
            var gallery = mui('.mui-slider');
            gallery.slider({
              interval:5000//自動輪播周期，若為0則不自動播放，默認為0；
            });
            mui.init({
                swipeBack:true //啟用右滑關閉功能
            });
        </script>

效果圖如下：