mui轮播图与显示小圆点
电脑版发表于：2019/11/11 14:43
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="http://image.tnblog.net/banner18.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="http://image.tnblog.net/4cf9caa6-8d63-4e6e-b370-4ee87a095395.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="http://image.tnblog.net/782b84c4-21d0-4216-a98a-c983888adf37_0.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="http://image.tnblog.net/banner18.jpg" /></a></div> <!-- 支持循环，需要重复图片节点 --> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://image.tnblog.net/4cf9caa6-8d63-4e6e-b370-4ee87a095395.jpg" /></a></div> </div> <div class="mui-slider-indicator "> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div>
js:
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
});效果如下：
