1, 支持循环 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/2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div> <!--支持循环，需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/0.jpg" /></a></div> </div> </div> ``` 2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容 HTML部分: ``` <div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div> <!--<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>--> </div> </div> ``` JavaScript部分相同: ``` //获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； }); document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； alert("你正在看第"+(event.detail.slideNumber+1)+"张图片"); }); ``` > 注意:如果ajax获得图片后，需要在写入图片以后，需要从新调用一下 gallery.slider();