[原型设计]Axure制作首页轮播图片切换效果

1、新建Axure PR文件，取名“Axure制作首页轮播图片切换效果”

2、获取素材，进入36Kr官网主页，获取轮播图片素材。

获取素材

3、拖拽动态面板控件Dynamic Panel,取名“轮播图片”，设置6个状态分别取名为1、2、3、4、5、6，动态面板大小设置为和图片大小一致747*231px。

设置动态面板

4、双击动态面板1-6每个状态，分别将图片1-6添加到动态面板状态中。

添加状态

5、回到Home主页，在动态面板“轮播图片”左右分别添加一个图片控件Image（从Widgets控件栏拖拽），分别取名left、right，位置、大小根据需要*调整。

加入方向键

6、将left、right图片分别替换成选择的素材图片。两个图片位置和大小自行调整。

Image图片控件替换图片

7、选中两个Image控件left、right，单机右键，选择Set Hidden，设置隐藏。

设置隐藏

设置隐藏后的效果如下

隐藏效果

8、为动态面板“轮播图片”设置自动定时轮播效果。选中动态面板“轮播图片”控件，在Page Interactions栏添加OnPageLoad事件，选择Dynamic Panels——Set Panel State——Set the state选择Next——勾选Wrap from last to first和Repeat every 2000 ms（设置每两秒钟轮换一张图片）——选择Animate In和Animate Out分别为slide left，表示从左滑入和从左滑入，设置滑入滑出时间默认为500ms。

设置自动轮播

设置自动轮播

9、添加动态面板“轮播图片”鼠标事件。鼠标移到图片上时，自动显示左右两个方向按钮。选中动态面板“轮播图片”，添加OnMouseEnter事件，选择Widgets控件栏，选择Show/Hide，为Left、Right图片控件设置显示效果。

添加鼠标事件

添加鼠标事件

10、添加动态面板“轮播图片”鼠标事件。鼠标移出图片时，自动隐藏左右两个方向按钮。选中动态面板“轮播图片”，添加OnMouseOut事件，选择Widgets控件栏，选择Show/Hide，为Left、Right图片控件设置隐藏效果。

添加鼠标事件

添加鼠标事件

11、为Image：Left、Right分别添加事件，点击Left图片显示上一张，点击Right图片显示下一张，选中Left和Right图片控件，设置Onclick事件，如下。

Image：Right鼠标事件

Left按钮为显示上一张，图片从左向右滑动，Select the state选择Previous，Animate In 和Animate Out选择slide right。

Image： Left鼠标事件

12、演示效果如下

图片轮播效果

13、如需演示素材和rp源文件，如下留言获取。

素材包及rp源文件

如需素材包及rp源文件，请留言联系作者获取。