Axure怎么使用动态面板制作banner图片轮播?

Axure就不多介绍了,一般对产品岗位比较了解的都知道,常用的原型工具。这里为大家做一个用动态面板做简单的banner图片轮播的方法。

一、基础准备工作

1、打开Axure,页面名称命名为“图片轮播”;在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,如图,在上方菜单栏将宽调整为400,高为200(宽高根据个人需求来自行设置)

2、双击建立的动态面板,弹出“动态面板状态管理”窗口。给当前动态面板起名字为“图片轮播”;在面板状态区域,点击“+”增加状态,需要有几个图片轮播,建立几个状态,在每个状态上,右键,可重命名,当前我们做三个图片轮播的,命名为“图1”“图2“”图3“。完成后,点击窗口的确定按钮。

3、在右侧窗口下方“部件管理”,双击动态面板的状态“图1”;(注意,如果看不到部件管理,可以在菜单栏的“视图”-“面板”设置);在左侧的“部件”,左键选中并拖动一个“图片”放置于当前的工作窗口中。

4、双击图片的图标,弹出选择图片的路径框,这里大家选择需要轮播的图片就可以了,将图片选中后确认即可在工作台窗口打开图片;这里需要大家注意,如果图片的边缘位于当前状态框(虚线)的外面,需要拖动当前图片到虚线内,或者过大的需要裁剪(选中图片,右键可裁剪图片),或者调整图片大小,能将图片放置于虚线框内,否则完成后的原型会无法显示全等问题。

5、设置完成图1后,我们需要用同样的方法设置图2和图3,这里不细说了

6、三个图片均设置完成后,点击左侧上方的“图片轮播“页面,返回主页面,这里我们可以看到之前的动态面板已经默认显示图1的图片了。

二、图片轮播的动态面板设置步骤

1、选中动态工作页面的动态面板,在右侧“部件交互和注释”的“载入时”右键,选择“新增用例”,弹出窗口“用例编辑器”

2、在“用例编辑器”窗口“动态面板”,选择设置面板状态。

3、在第四步“配置动作”,选中“设置图片轮播”,前面会表示√,表示选中;在“选中状态”选择“next”(表示正序轮播)previous(表示倒叙轮播);并选中下面的“从最后一个到第一个自动循环”(这样才能实现一直轮播);可以选择循环间隔时间,亦可以默认不设置。

4、进入时,退出时的动画可以根据需求自行设置,我这里选择了一个进入时,向右滑动,完成后,点击确定按钮。

5、可以F5预览,或者生成原型文件,部分浏览器不支持的,建议大家默认IE。ok了,完成。

(0)

相关推荐

  • 如何用ps制作flash图片轮播效果

    操作方法 01 利用photoshop制作flash图片轮播效果,可以用做网站banner广告图等.用gif动画替代flash.效果如下: 02 准备好3张图片素材,这里张数可以随自己选择.将图片大小 ...

  • axure怎么使用动态面板制作淘宝图片轮播效果?

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现. 1.下载需要轮播的图片 2.将图片引入至axure中,将引入的第一张图片转为动态面板 3.将动态面板添加四个状态,分别为状态 ...

  • axure怎么使用动态面板制作转盘抽奖?

    目前各个网站,经常可以看到大转盘抽奖,本经验初步讲解大转盘抽奖的前提条件:让转盘转起来. 1.首先百度一张转盘图片,将改图片引入至axure中 2.将该转盘转为动态面板 3.将该动态面板分为12个状态 ...

  • 如何用Axure RP制作图片轮播

    对于初学者,在用Axure RP软件制作原型网页时,想使图片轮播怎么办?不需愁眉不展,小编现在现身给你支一招,看好了哦! 操作方法 01 首先从部件库中拖图片部件到面板中,如图所示. 02 右击部件, ...

  • ppt怎么制作图片轮播的动画效果?

    ppt文件想要做多图轮番播放的效果,该怎么制作这个动画效果,下面我们就来看看详细的教程. 1.首先启动ppt2010,执行插入命令,插入事先准备好的六张图片. 2.执行ctrl+a全选,执行oneke ...

  • 怎样制作图片轮播

    图片轮播可以为店铺增加很多色彩,增加档次 步骤/方法 01 新建一张画布,,点击拼图自由拼图,选择合适的模板, 也可自定义背景颜色,点击添加图片,更改图片大小, ,制作好后 ,点击另存为. 02 再建 ...

  • ppt怎么制作人物头像轮播的效果? ppt照片轮播动画制作方法

    ppt中可以使用口袋动画制作很多动画效果,该怎么制作人物头像轮播的效果被?请看下文详细介绍. 1.首先启动ppt2010,执行插入-图片命令,插入一组人物照片. 2.执行ctrl+a组合键全选,接着设 ...

  • dw中图片轮播代码怎么写

    在网站制作过程中,为添加网站内容,会使用图片轮播,但是设计窗口很难编辑,使用代码最方便不过 操作方法 01 打开dw软件,左上角会有代码.拆分.设计三个选项,选在代码,打开在body后插入代码:< ...

  • 淘宝装修图片轮播怎么做,如何上传图片?

    淘宝装修一般默认模块系统会自动加载产品信息,做为新手都可以不用修改,不用管,但是图片轮播模块不一样,里面是系统信息是默认的官方图片,需要自己换自己的产品图片的,产品图的链接还要自己来加上才完美的.新手 ...