~~~ //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); }); }, ~~~