金赞官网 来利囯际 龙虎娱乐
您的位置:兴化新闻热线 > 民生 > 正文

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

更新时间:2020-07-29   来源:本站原创

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

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

本教程知识点:初级的动态面板使用;初级的页面交互事件、元件交互事件使用:鼠标移入移除、动态面板状态切换;图片元件、矩形、SVG图标等元件使用。

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

二、制作方式

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

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

1. 制作基础的轮播图2. 制作同等动态页面状态的轮播图小标

结合内容轮播图的顺序给每个状态制作进度排序,使其轮播图小标的状态与内容轮播图页面一一匹配。

3. 制作左右切换的按钮

可以通过形状+SVG图标实现。