您现在的位置:   首页 >> 新闻中心 >> 原型设计

Axure入门案例系列——进阶轮播图

发布人:www.yunke.ai 发布时间:2021-01-01 141 次浏览

编辑导语:图片轮播是各大网站常常见到的形式,本文作者今天带领大家坦探讨进阶的轮播图的实现效果,例如轮播进度指示、快速跳转、鼠标移入暂停轮播等等,希望看后对你有所启发。

准备:Axure 8(或Axure 9)软件已安装,掌握基本的软件使用。

本教程知识点:

  1. 初级的动态面板使用;
  2. 初级的页面交互事件、元件交互事件使用:鼠标移入移除、动态面板状态切换;
  3. 图片元件、矩形、SVG图标等元件使用。

一、功能

  1. 鼠标移入暂停轮播、鼠标移除继续轮播;
  2. 点击切换上一张轮播图、点击切换下一张轮播图;
  3. 轮播图与小标同步、小标点击跳转。

二、制作方式

以三张轮播为例,使用Axure 8为例:

进阶轮播图主要为了适配PC端的操作,加入了指定的轮播图页面切换;鼠标移动停止轮播,移出继续轮播;手动切换上下轮播图。