图片轮播

图片轮播

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；});

想要学习前端开发的同学，可以加群：

543627393学习哦！