首页 > 其他 > 详细

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

时间:2017-11-08 11:27:50      阅读:393      评论:0      收藏:0      [点我收藏+]

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

效果图如下:

技术分享

 

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

原文:http://www.cnblogs.com/wuss/p/7802776.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!