Axure 动态面板初使用 - 实现简单的Banner图轮播效果

使用工具版本

Axure 9

实现的效果

在这里插入图片描述

步骤过程

1、打开Axure工具,从元件库拖个动态面板到空白页;
在这里插入图片描述

2、给面板设置一个常用的banner尺寸,举个栗子:343×151(移动端我常用的banner尺寸),顺便给它起个名字,就叫[轮播面板];
在这里插入图片描述

3、双击轮播面板,进入编辑状态;

在这里插入图片描述

4、然后给面板再添加2个状态,并分别命名为[b1]、[b2]、[b3];

在这里插入图片描述

5、回到[b1]状态,从元件库拖个矩形到页面,并把矩形调整到跟[b1]状态相同大小尺寸、位置,顺便给它个颜色;
在这里插入图片描述

6、再从原件库,拖3个椭圆形到页面,将尺寸设为8×8大小;

在这里插入图片描述

7、将第一个椭圆设置成黑色,跟另两个作区别;

在这里插入图片描述

8、然后将[b1]内所有元素选中(Ctrl+A全选),复制后,选择[b2]状态,把所有元素复制粘贴到[b2]页面内;

在这里插入图片描述

9、在[b2]中调整椭圆点,将第二个圆点调整为黑色,第一个还原成白色,并将背景色换成另一种颜色;
在这里插入图片描述

10、同样复制全部粘贴到[b3]状态页面内,并调整第三个圆点成黑色,另两个为白色,背景色再换一个颜色;

在这里插入图片描述

11、点击【关闭】按钮,关闭面板编辑模式,鼠标点击空白区域,新建页面交互(注意是页面交互);
在这里插入图片描述

12、选择“页面 载入时”,
在这里插入图片描述

13、选择“设置面板状态”;

在这里插入图片描述
14、选择“轮播面板”;
在这里插入图片描述

15、设置状态为[下一项],勾选“向后循环”,进入动画和退出动画选择“逐渐”,默认“500”毫秒,打开“更多选项”,勾选“循环间隔”,设置为“3000”毫秒,点击【完成】;
在这里插入图片描述

16、点击【预览】,在浏览器中打开,就可以看到效果了
在这里插入图片描述

17、可以按F12,调出开发者工具,选择手机模拟浏览效果。
在这里插入图片描述
18、浏览器手机模拟效果动图:

在这里插入图片描述

以上就是本次关于 Axure 动态面板中怎么实现一个简单的 Banner 轮播图效果的教程,希望能帮助你更了解 Axure 的动态面板。


[1] Axure 动态面板:Axure 动态面板初使用-实现简单的tab切换页面效果

[2] 原文阅读

我是Just,这里是「设计师工作日常」,求点赞求关注!!!

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-03 04:08:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-03 04:08:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-03 04:08:01       82 阅读
  4. Python语言-面向对象

    2024-02-03 04:08:01       91 阅读

热门阅读

  1. Node Exporter开启tcp相关指标

    2024-02-03 04:08:01       49 阅读
  2. chatchat部署在ubuntu上的坑

    2024-02-03 04:08:01       59 阅读
  3. Spring声明式事务

    2024-02-03 04:08:01       63 阅读
  4. 算法练习03——滑动窗口

    2024-02-03 04:08:01       59 阅读
  5. JC/T 2569-2020 建筑门窗用木型材检测

    2024-02-03 04:08:01       55 阅读
  6. 索引的设计原则(MySQL)

    2024-02-03 04:08:01       51 阅读
  7. RAG +milvus示例

    2024-02-03 04:08:01       62 阅读
  8. 深度学习之图像分类

    2024-02-03 04:08:01       57 阅读
  9. 亚马逊国际获得AMAZON商品详情 API

    2024-02-03 04:08:01       59 阅读