》》mui--图片轮播

mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：

//获得slider插件对象

var gallery = mui('.mui-slider');gallery.slider({

  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；});

因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将slideshowDelay参数设为0即可。

若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：

//获得slider插件对象

var gallery = mui('.mui-slider');gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；

图片轮播涉及的另外一个问题：是否支持循环播放，比如有1、2、3、4四张图片，从第1张图片起，依次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种效果：  

· 支持循环：左滑，直接切换到第1张图片；

· 不支持循环：左滑，无反应，继续显示第4张图片，用户若要显示第1张图片，必须连续向右滑动切换到第1张图片；

  当显示第1张图片时，继续右滑是否显示第4张图片，是同样问题；这个问题的实现需要通过.mui-slider-loop类及DOM节点来控制；若不支持循环，代码比较简单，如下：

 

<div class="mui-slider">

  <div class="mui-slider-group">

    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>

  </div></div>

若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：

<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="4.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>

    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>

    <!--支持循环，需要重复图片节点-->

    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>

  </div></div>

注意：mui框架会默认初始化当前页面的图片轮播组件；若轮播组件内容为js动态生成时（比如通过ajax动态获取的营销信息），则需要在动态DOM生成后，手动调用图片轮播的初始化方法；代码如下：  

//获得slider插件对象var gallery = mui('.mui-slider');

gallery.slider({

  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；});