编辑指南:本文与大家分享如何使用Axure repeater做照片轮播效果。作者对预习图、所需原稿、操作步骤逐一进行分析，并介绍了过程中需要注意的问题，希望对你有所启发。

你好，今天，我教我的大学用复读机做照片旋转。

为什么要用中继器来做图片转盘

开始教之前，先讨论一下为什么要用复读机做照片旋转。

首先，市面上图片轮播的教程都是用动态面板做的。他将不同的图片放入不同的动态面板中，然后通过设置动态面板的下一个和上一个来实现转盘。这样做没有问题，但是使用起来很不方便。为什么？第一，动态面板相当于写死。比如你有4张轮播图片，下次想改成10张，需要多复制6页，在每一页上设置交互和导入图片；第二，如果我想改变旋转木马的大小，我必须在10页上修改它。因此，浪费了大量时间，导致制造的部件的可重用性低。

因此，作者制作了一个带有中继器的照片转盘原型，只需将图片导入中继器表即可自动生成交互，只需修改一次即可修改交互大小。它非常方便快捷，而且完成后可以高度重用。

原型效果预览

以下是一个好的旋转木马的效果，你也可以自己体验一下

原型演示地址:https://cspfgk.axshare.com/

原型教学

1.所需材料

中继器×1，图片×1，动态面板(循环面板)×1，左按钮×1，右按钮×1。

如下图所示放置

2.中继器表设置

共有两栏，可按如下所示填写，并设置直放站水平布局

no：图片序号，按123456顺序先写，用于轮播的交互逻辑。picture：图片，右键导入图片，或者复制粘贴图片地址。

3.中继器的相互作用

加载每个项目后，将图片值设置为item.picture

加载中继器时，添加排序按否的升序排列

完成后，将中继器更改为动态面板(面板1)，将面板1更改为动态面板(面板2)。这里解释一下，面板1是用来做鼠标左右拖动交互的。面板2是因为移动交互无法选择中继器，所以应该变成动态面板。

面板1交互

面板1的尺寸与图片的尺寸相同

加载面板1后，将面板1移动到-[[LVAR1.width]]，其中LVAR1.width表示图片的宽度。因为点击左键可以动态移动其中一张图片，所以默认需要向左移动。

面板2交互

向左拖动结束时触发右按钮事件。

拖动结束时，当按钮鼠标单击时触发事件。

4.左右按钮的交互

当鼠标点击右键时，我们想要做出一个动态的移动效果。首先，我们简单解释一下这个想法。点击时，我们先将面板1的距离移动一个图片，然后更新线条，将原来的第一个图片变成最后一个，最后一个变成倒数第二个...以此类推，最后将面板1恢复到原来的位置，这样我们就可以进行下一步操作了。

第一步是禁用该按钮(因为如果它被禁用，在第一次移动完成之前，它将开始在连续点2下移动更多)

在第二步中，移动面板1向左移动一个图片距离，即，-[[LVAR1.width]]，LVAR1.width表示图片宽度。动画选择是线性500毫秒

第三步，等待画面移动，设置等待550 ms。

������ҳ���

第四步，更新中继器，首先标记所有行，将所有行的序列号更新为原序列号-1(即TargetItem.no-1)，然后将更新序列号为0的行更新为最后一行，[[Target Item。复读机。项目计数]]

第五步是将面板1移动到原来的位置，即[[LVAR1.width]]。在这里，注意不要在瞬间动画化。

最后一步是启用此按钮。

同样，用鼠标单击左键也可以做到这一点:

第一步是禁用此按钮

在第二步中，移动面板1被移动一个图像距离，即[[LVAR1.width]]，其中LVAR1.width表示图像宽度。动画选择是线性500毫秒

第三步，等待画面移动，设置等待550 ms。

第四步，更新中继器。首先更新最后一行[[目标项。复读机。项目计数]]，并将其序列号更新为0。然后标记所有行，并将所有行的序列号更新为原始序列号+1(即TargetItem.no+1)。

第五步是将面板1移动到其原始位置，即-[[LVAR1.width]]。在这里，注意不要在瞬间动画化。

最后一步是启用此按钮。

5.制作自动转盘

我们使用圆形动态面板来制作自动旋转木马的效果。首先，在面板中添加状态2

加载时将面板状态设置为下一个(反向循环，间隔3000毫秒)

状态改变时，当鼠标右键单击时触发的事件

6.整个投资组合的事件

最后，我们将所有组件组合在一起，以实现当鼠标移动到组合中时不会自动旋转的效果

当鼠标移入时，显示左右按钮，循环动态面板的状态设置为停止循环

当鼠标移出时，隐藏左右按钮，并将循环动态面板的状态设置为下一个(反向循环，间隔3000毫秒)