手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

使用Axure如何实现轮播图效果

时间:2024-10-11 21:28:05

1、第一步,将动态面板拖至手机外壳中并调整大小;

使用Axure如何实现轮播图效果

2、第二步,双击已经拖过来的动态面板,点击“+”号再创建两个动态面板,并分别进行命名;

使用Axure如何实现轮播图效果

3、第三步,依次双击创建的这三个动态面板,并插入大小合适的图片,如图1,三个动态面板都插入图片后如图2;

使用Axure如何实现轮播图效果
使用Axure如何实现轮播图效果

4、第四步,单机选中动态面板,并双击右侧交互的“载入时”;

使用Axure如何实现轮播图效果

5、第五步,双击“载入时”后会弹出用例编辑弹窗,在此弹窗,单机设置动态面板状态;

使用Axure如何实现轮播图效果

6、第六步,选中要编辑的动态面板元件和选择状态为“Next”

使用Axure如何实现轮播图效果

7、第七步,配置以下信息:(1)选中向后循环,这是为了保证每张图片都是按照顺序依次进行展示的。钱砀渝测(2)循环间隔,一般是2500ms-3500ms,此处我设置了3000ms,这个时间决定了每张图片的切换频率。(3)首个状态延时,也是要勾选的,这是为了刚进入此页面后第一张轮播图不会一闪而过。(4)进入动画、退出动画设置及时间,都设置向左滑动,这个是用来控制轮播图的切换方向和切换速度的。

使用Axure如何实现轮播图效果

8、最后点击用例编辑弹窗的“确定”按钮,即可完成轮播图的制作

使用Axure如何实现轮播图效果
© 手抄报圈