标签: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>
效果图如下:
标签:pre init 轮播 ini 支持 技术 效果 set var
原文地址:http://www.cnblogs.com/wuss/p/7802776.html