循环播放的轮播图/幻灯片 | Rotating Carousel/Slideshow

在本教程中，你将学习如何制作可以循环播放的轮播图、横幅或幻灯片，你可以设置它自动播放或通过点击按钮播放。【原型预览】

1、元件设置

创建第一屏

1. 打开一个新的RP文件，双击页面面板中的Page 1将其在画布中打开。
2. 从元件库中拖拽一个矩形元件到画布中，然后将矩形填充为蓝色（样式面板下或样式工具栏中，填充，颜色）。
3. 在矩形元件上点击鼠标右键，在弹出的右键菜单中选择转换为动态面板。

创建第二屏

1. 双击动态面板来编辑它的状态
2. 在画布的顶部，点击State 1，在弹出的下拉列表底部，点击添加状态然后按下回车键来添加State 2。

1. 拖拽一个矩形元件到State 2画布中，设置其坐标为（0,0），然后将其填充为红色。

创建第三屏

1. 重复上面的步骤来创建State 3，设置矩形元件的填充色为绿色。
2. 点击右上角的关闭按钮或者按下ESC键退出动态面板编辑模式。

提示：当创建你自己的轮播图时，你可以在动态面板的每个状态中使用任何你喜欢的元件。

2、当页面加载时使轮播图自动循环播放

1. 点击画布的空白处以选中页面本身，然后在交互面板下点击新建交互。

1. 在弹出的列表中选择页面载入时，然后再选择设置面板状态。
2. 在目标下拉列表中选择动态面板。
3. 在STATE下拉列表中选择下一项，并勾选向后循环。这样就可以使动态面板到达最后一个状态时再返回到第一个状态。

1. 在进入动画下选择向左滑动，注意此时退出动画会自动变成与其对应的选项。

1. 点击更多选项，勾选循环间隔1000毫秒，并保留首个状态延时1000毫秒后切换的复选框为勾选状态，然后点击确定按钮保存操作。

这样可以使轮播图在第一个状态改变时，自动进入下一个状态，并且第一个状态将在页面加载1秒后才会改变。

3、预览交互

预览页面，1秒钟之后，这个轮播图就会开始自动循环播放。

4、添加“下一个”按钮

1. 回到Axure RP中，在元件面板下，通过下拉列表切换到Icons元件库。
2. 在面板顶部的搜索框中输入“箭头”，然后找一个你喜欢的向右的箭头，将箭头图表拖拽到画布中，放在动态面板的右下方。
3. 选中箭头图标，在交互面板下点击新建交互。
4. 在弹出的下拉列表中选择单击时事件，然后再选择设置面板状态动作。
5. 在目标下拉列表中选择动态面板。
6. 在STATE下拉列表中选择下一项，并勾选向后循环的复选框。
7. 在进入动画下选择向左滑动，然后点击确定按钮保存操作。

5、添加“上一个”按钮

重复以上步骤来设置一个向左的箭头，设置动态面板的状态为上一项，然后进入动画的选项为向右滑动。

6、预览交互

预览页面，点击箭头来浏览轮播图。

其他信息和提示

你也可以制作适用于移动端的轮播图或幻灯片，并且用动态面板的向左滑动和向右滑动事件来替代上述步骤中的左箭头和右箭头。

想要查看完整教程，请点击：滑动幻灯片教程。