【Axure学习ing】Axure8制作图片轮播效果

图片轮播效果

效果说明：（1）页面载入后定时4s自动循环轮播；（2）图片向左滑动，原点指示随图片滑动变化；（3）鼠标移入原点可切换到对应的图片。

制作前准备：Axure8+3张图片

动效制作：

1.将page1命名为“图片轮播”——拖入“图片”控件，将其命名为“pic",并调整其样式大小为“375*200”。

step1

2.双击“pic"控件添加图1，调整图片大小为375*200，将其转换为“动态面板”，再分别添加两个状态，在状态2，3添加图2和图3。

step2

3.回到图片轮播页，拖入”椭圆“控件，调整大小及样式，复制2个，平行排列对齐。将原点1灰色填充，原点2，3白色填充。将3个原点组合并将其转换为"动态面板”，添加状态2（命名为2），状态3（命名为3），分别在状态2，3填充第2和第3个原点为灰色，其余为白色。

4.拖入3个“热区”控件，分别覆盖在原点1，2，3上（热区大小与圆大小一致），分别命名为point1,point2,point3。

step3&step4

5.添加用例——自动循环轮播：

（1）用例1，选中“图片轮播”页面，选择交互“页面载入时”，添加动作“设置面板状态”，在配置动作做选择“pic动态面板”，选择状态为Next，向后循环，循环间隔4000毫秒（4s定时自动循环轮播），添加进入和退出动画为向左滑动。同样的，设置“point动态面板”，选择状态为Next，向后循环，循环间隔4000毫秒（4s定时自动循环轮播），添加进入和退出动画为逐渐。

step5

步骤5基本上就完成了图片定时自动循环轮播的效果了👍👍。

6.添加用例——鼠标移入原点切换至对应的图片

（1）选中热区“point1",添加交互“鼠标移入时”，添加动作“设置面板状态，配置动作，设置“pic动态面板”状态为state1,进入和退出动画为淡入淡出。同样的，设置“point动态面板”状态为1，进入和退出状态为逐渐。

step6.1

(2)选中热区“point1",添加交互“鼠标移出时”，添加动作“设置面板状态”，在配置动作做选择“pic动态面板”，选择状态为Next，向后循环，循环间隔4000毫秒（4s定时自动循环轮播），添加进入和退出动画为向左滑动。同样的，设置“point动态面板”，选择状态为Next，向后循环，循环间隔4000毫秒（4s定时自动循环轮播），添加进入和退出动画为逐渐。在这里一定特别注意要勾选“首个状态延时4000毫秒后切换，如果没有勾选，则会出现鼠标一移出，效果混乱的现象。

step6.2

The end. 常见的图片轮播效果就完成了，超级简单，只需要5分钟的时间搞定！

附上原型链接，希望大家指正不正确的地方。跪谢。

链接: https://pan.baidu.com/s/1eS1Brpw 密码: rqrj