圖片輪播 · MUI實用教程

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> </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();