技术编程|Axure入门案例系列——进阶轮播图
【技术编程|Axure入门案例系列——进阶轮播图】
编辑导语：图片轮播是各大网站常常见到的形式 ， 本文作者今天带领大家坦探讨进阶的轮播图的实现效果 ， 例如轮播进度指示、快速跳转、鼠标移入暂停轮播等等 ， 希望看后对你有所启发 。
本文插图
准备：Axure 8（或Axure 9）软件已安装 ， 掌握基本的软件使用 。
本教程知识点：初级的动态面板使用；初级的页面交互事件、元件交互事件使用：鼠标移入移除、动态面板状态切换；图片元件、矩形、SVG图标等元件使用 。
一、功能鼠标移入暂停轮播、鼠标移除继续轮播；点击切换上一张轮播图、点击切换下一张轮播图；轮播图与小标同步、小标点击跳转 。
二、制作方式
以三张轮播为例 ， 使用Axure 8为例：
进阶轮播图主要为了适配PC端的操作 ， 加入了指定的轮播图页面切换；鼠标移动停止轮播 ， 移出继续轮播；手动切换上下轮播图 。
1. 制作基础的轮播图2. 制作同等动态页面状态的轮播图小标
结合内容轮播图的顺序给每个状态制作进度排序 ， 使其轮播图小标的状态与内容轮播图页面一一匹配 。
本文插图
3. 制作左右切换的按钮
本文插图
可以通过形状+SVG图标实现 。
透明状态实现：填充形状为纯色（纯白：#FFFFFF） ， 设置透明度为：30% 。
本文插图
4. 交互制作
1）轮播图同步动起来内容轮播图页面切换+右下部小标切换；在页面层级配置页面载入的动态面版的交互（注：需要同时配置两个动态面板交互）；选择两个动态面板模式：向后循环（Next）；勾选两个动态面本向后循环（若未勾选向后循环 ， 动态面板只会切换一个状态）；勾选循环间隔时间（系统默认1000毫秒（1秒=1000毫秒） ， 日常中基本设置为3000–5000之间）；勾引首个状态延时（勾选后 ， 第一张轮播展示对应时间后 ， 才进行加载第二张；若不勾选 ， 第一张会一闪而过）；动画：缓解动态版本切换的生硬 。
动画只需在内容动态面板上配置 ， 小标动态面板无需配置；方向根据实际效果选择（一般常用向左滑动）；动画过渡时间 ， 同样是缓解切换的生硬效果 。
本文插图
本文插图
2）设置小标点击后跳转对应的页面每个状态的小标中的按钮都需要添加交互事件；设置状态需同步（注：点击第一个 ， 切换小标为小标1、切换内容轮播图为轮播图状态1）；
技巧：统一制作一个小标状态 ， 然后进行复制 ， 复制后对应的调整小标内容的排版布局 ， 这样就可以保证整个交互不会错乱和丢失（如果采用每个页面单独制作交互 ， 就需要注意 ， 当轮播图状态越多 ， 制作小标的交互需要更细心） 。
本文插图
3）设置左右按钮点击切换（以左切换为例）设置按钮点击事件点击后切换内容动态面板、小标为上一个 。 向前循环：勾选向前循环（若不勾选向前循环 ， 在动态面板切换至第一个后 ， 将无法再次向前切换）（注：右按钮为向后循环勾选） 。 注：Next（下一个）、Previous（上一个） 。 配置完成点击事件后 ， 进行左右切换其实状态的隐藏展示（设置隐藏状态 ， 只在鼠标移入轮播图后进行展示切换按钮） 。
推荐阅读
- 摄像头|小米截胡中兴屏下摄像头技术，小米研发还是供应链技术？
- 马斯克|马斯克用活猪演示脑机接口技术：实时读取猪脑信息 心灵感应成真了
- 三防|带你了解三防手持终端的秘密
- 第三|原创 小米发布第三代屏下相机技术，或将在Mix 4上首秀？
- 海信|首个新兴显示技术分标委成立 海信牵头制定国标
- 中年|Python编程语言有什么独特的优势呢?
- |马斯克用活猪演示脑机技术，他希望今年年底前能在人体内植入
- 互联网的放大镜|小米截胡中兴屏下摄像头技术，小米研发还是供应链技术？
- 新机发布|原创 小米发布第三代屏下相机技术，或将在Mix 4上首秀？
- 技术|最新《中国禁止出口限制出口技术目录》发布，新增操作系统、密码芯片安全技术