19、图片轮播

<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>

<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>

//获得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)+"张图片");
});