axure实现图片轮播

图片轮播效果

效果说明：（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基本上就完成了图片定时自动循环轮播的效果了