MUI学习03-滚动图（幻灯片）及菜单项（九宫格）

Posted 2020-10-13 不见花落

<!--标准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>

效果图如下：