》》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开始；

图片轮播涉及的另一个问题：是否支持循环播放，好比有一、二、三、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张图片，图片顺序变为：四、一、二、三、四、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；});