图片轮播 | Image Carousel

构建一个图片轮播、旋转横幅或者内容幻灯片,你可以将它们设置为自动播放或通过点击按钮播放。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:设置

在练习文件中,打开“轮播图”页面。

页面上有两个箭头图标(来自图标元件库)和三张图片。

STEP2:制作轮播动态面板

要制作一个轮播,需要将每个图片或其他的轮播项目放在一个动态面板各自的状态中。

右键单击“图片1”然后选择“转换为动态面板”,给动态面板命名为“轮播图”。

双击你刚刚创建的动态面板来打开动态面板状态管理器。

点击两次绿色的“+”图标,给动态面板添加两个新的状态(总共三个状态)。

点击“确定”按钮关闭对话框。

右键点击“图片2”然后选择“剪切”。

在概要窗口中,双击“State2”打开进行编辑。

将“图片2”粘贴到“State2”的画布上,确保图片的位置坐标为(0,0)。

重复以上步骤,将“图片3”粘贴到“State3”中。

STEP3:设置后退按钮的交互

回到“轮播图”页面,选择“后退箭头”元件,在属性页签下,双加“鼠标单击时”来创建一个新的鼠标单击时用例。

在左侧“添加动作”栏,点击“设置面板状态”动作。

在右侧“配置动作”栏选择动态面板“轮播图”,然后在当前栏的底部,点击“选择状态”的下拉列表然后选择“Previous”,然后点击“向前循环”发复选框,这样图片就可以循环播放了。

要设置状态改变的滑动效果,可以使用“进入动画”和“退出动画”的设置,将它们都设置为“向右滑动”(因为这是你的后退按钮),并且设置持续时间为500毫秒。

点击“确定”按钮关闭用例编辑器。

STEP4:设置前进按钮的交互

对前进按钮图标重复上面的步骤,这个过程大部分都是相同的。

在“选择状态”的下拉列表中,选择“Next”而不是“Previous”。

设置动画的时候,选择“向左滑动”而不是“向右滑动”。

在此之后,你可以预览一下,以确保按钮可以达到预期的效果。

STEP5:实现自动轮播

选中动态面板,在属性页签下,双击“载入时”来添加一个新的载入时用例。

在左侧“添加动作”栏,点击“设置面板状态”。

在右侧“配置动作”栏,选择“当前元件”。

在右侧“配置动作”栏的底部,点击“选择状态”的下拉列表并选择“Next”,点击“向后循环”和“循环间隔”的复选框,默认的设置是图片每秒(1000毫秒)前进一次,你可以使用“毫秒”字段来自定义间隔时间(可以试试4000毫秒)。

如果选中“首个状态延迟1000毫秒后切换”,将使得页面加载后,动态面板的第一个状态会等待1秒再切换到下一个,而不是立刻切换。如果你修改了“循环间隔”的时间,这个“1000毫秒”也会跟着自动更新。

设置“进入动画”和“退出动画”的值为“向左滑动”和“500毫秒”。

STEP6:预览

点击预览。

这个轮播图将会开始自动播放,值得注意的是,当你使用前进和后退按钮手动切换动态面板状态的时候,将会终止自动轮播。试试看你是否可以创建一个可以不断播放的轮播图,如果需要帮助,请添加我的微信:urmagic。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。