~~~ //html 循环切换 <div id="slider" class="mui-slider slider-style"> <div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../img/banner01.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="../img/banner01.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="../img/banner01.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="../img/banner01.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="../img/banner01.jpg" /></a></div> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../img/banner01.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 class="mui-indicator"></div> </div> </div> //不循环 //不支持循环 <div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="images/banner.png" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/banner1.png" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/banner2.png" /></a></div> <div class="mui-slider-item"><a href="#"><img src="images/banner3.png" /></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 class="mui-indicator"></div> </div> </div> ~~~ ~~~ //js dui.slider({ element:'#slider', isAuto:true, duration:2000, callback:function(e){ } }) ~~~ ~~~ /** * callback:回调函数 * duration:持续时间 * isAuto:true 自动播放 * @param {Object} jsonData */ slider:function(jsonData){ var slider = mui(jsonData.element); if(jsonData.isAuto){ slider.slider({ 'interval':jsonData.duration }) } document.querySelector('#slider').addEventListener('slide', function(event) { jsonData.callback && jsonData.callback(event.detail.slideNumber+1); }); }, ~~~