axure的html连接数据库,Axure教程 | 如何使用中继器当数据库,制作web端幻灯片?...

f22ac1308d73f9ef74d9d18c84acb871.png

1.先看GIF效果图

cd4ff6e82824a045dd0d85d57a4562ee.gif

2.制作方式

我们先看下幻灯片需要用到的元素:

31c984def33889b4d7c56d671ff0e969.png

幻灯片需要用到的基础元素是5个。

分别为:

背景大图

左按钮

右按钮

大图上的文本

图片切换按钮素:

首先

我们在Axure中拖入一个动态面板,我们命名为:“幻灯片”。

然后为这个面板设置3种状态,分别命名为:“图片1”,“图片2”,“图片3”。

7dcfeebb78e4a6841ce7df54abc5ec7c.png

每个状态里面都要放一张图片元件和一个文本元件。

命名方式为元素加序号,比如这样:image1,title1。

0c590f56448e93fcd238b90c15a61c91.png

做两个按钮,分别为左右按钮,放到动态面板的左右两边,设置为隐藏。

6a71f16949a31465cc006961c7fcbc67.png

再做三个小按钮,放到动态面板的右下脚,设置点亮后的颜色,和默认的颜色。

320f2ce63ca22ae3451074caf3735840.png

其次

需要用到我们的中继器,元素库里拖一个中继器到页面中,删除里面到内容。

创建两个字段,设置三条数据:

06a947f694866405fcf00e5119493875.png

为中继器设置交互,一个是载入的时候进行排序,一个是为动态面板里的图片和标题进行赋值。

0bde00c1d8222e9a67169beccf6e21c4.png

最后

我们给动态面板和按钮分别设置交互动作,这个幻灯片就算完成了。

54780a337a914366c1da6aee12e9da7d.png

缺点/Bug

1.这样制作幻灯片,底部的三个按钮,在显示顺序上要比图片速度慢,不够流畅。

2.左右按钮默认是隐藏的,在鼠标放到幻灯片之后,才会显示。这种交互在来回进入图片的时候,会导致按钮的显示交互紊乱。

3.制作幻灯片的步骤并没有减少,制作速度并没有提高。

本文到此结束,欢迎朋友们拍砖,多多指出其中的不足。

本文Axure版本:Axure RP 8

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值