码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-08 12:00:13      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:pre   init   轮播   ini   支持   技术   效果   set   var   

<!--标准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-滚动图(幻灯片)及菜单项(九宫格)

标签:pre   init   轮播   ini   支持   技术   效果   set   var   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!