19、图片轮播

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, 不支持循环和循环不同的是没有再第一条和最后一条后面加入内容

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

19、图片轮播

推荐阅读