Axure动态轮播图制作教程

轮播图作为网站常用模块，axure如何实现一个左右滚动轮换的动态轮播图效果，大小图动态轮播常用于展示多张图片，其中包含两种不同尺寸的图片。这种类型的轮播通常用于网站首页、产品展示、广告宣传等场景，提供更丰富的展示方式，吸引用户的注意力并提供更多信息。通过切换不同的图片，可以有效地传达多个内容或产品。

axure9.com作者就教大家在Axure中如何用中继器+动态面板制作一个大小图动态轮播的原型模板。

先看看动态效果图：

二、axure制作教程

1、通过中继器储存图片

我们用中继器来制作这个原型模板，意义在于复用性强，制作完成后，后续更换或者增加图片，我们只需要修改中继器表格的信息及可。

中继器表格如下图所示

sortid列：对应图片的编号默认按12345顺序排列

picture列：对应图片列，右键导入对应图片即可

这里图片可以大于5张，有多少张就导入多少张，后续会通过交互，让他们循环显示。

2、动态面板控制图片显示

我们要添加动态面板，因为只有动态面板有拖动的事件，后续交互需要用到动态面板，而且动态面板可以遮挡多余的内容。我们需要在动态面板里添加5张图片，如下图所示

真正在动态面板里显示的图片只有234两张图片，15只是是用于移动的动态效果。

3、中继器交互

我们要将中继器里的图片设置到对应的图片元件里，所以我们在中继器每项加载时，我们用设置图片的交互，将图片设置到对应的元件里，这里我们需要根据情况来设置，如果是第一行，就设置到第一张图片元件，第二行就设置到第二张图片元件……

这样就将对应的图片设置上去了

4、动态面板左右拖动切换图片

首先我们讲一下他是怎么切换图片的，如果是向左拖动，其实就是想将右右面的那章图片放在中部，就是第4张要移动到第三张的位置，并且从小图变成大图，所以我们分别用移动的交互，将整个组合移动一个小图的距离，然后用设置尺寸的交互，将3的大图设置成小图，将4的小图设置为大图，这里移动和设置尺寸的交互我们都可以增加一个动画效果，一般等待时间设置为500ms，当然也可以根据你们的需要增加或者减少。

这样我们就移动完一次了，那我们如果想可以多次移动怎么办，那我们就要对他回复原状。

我们首先用等待的时间，等待他动画结束，所以这里等待时间可以比动画时间稍长一点，然后我们用移动和设置尺寸的交互，就是像右移动一个，将图3变回大图，将图四变回小图，这里注意，移动和设置尺寸都是瞬间完成的事，所以不要添加动画。

那这样不就是回复原来的样子吗，对的，其实我们只需要那个移动和变大的动画效果，结束之后我们我们通过交互瞬间恢复原状。然后再通过控制中继器里的图片值，来改变里面显示的图片，例如原来第五行的图片，我们将它变成第四行，第四行变成第三行，第三行变成第二行，第二行变成第一行。

所以我们在中继器载入的时候，要首先对中继器进行排序，对sortid列进行升序排列

然后我们只需要通过更新行的交互，将第一行的图片的sortid设置为当前值+中继器数据行数，这样就可以让他变成最大，例如，中继器有5张图片，第一次向左拖动图片之后，我们把第一行的图片的sortid设置为1+5=6，这样他就变成最后一行了，配合前面排序和设置图片的交互，第一张图就变成最后一张图，第5张图就变成第四张图……如此类图，想相当于图片瞬间移动了一格。