【axure】如何实现图片点击时候的切换_向阳

个人资料

微博

正文字体大小：大中小

【axure】如何实现图片点击时候的切换

(2012-04-25 00:03:47)

标签：

分类： axure

如下图，点击按钮在在三个之间切换，点击第一个图片，切换到第二个图片，点击第二个图片向右切换到第三个图片，向左切换到第一个图片，点击第三个图片向左切换到第二个图片。

设置图片切换需要两层的动态面板：一层动态面试是放置图片背景，一层图片是放置控制图片切换的动态面板。

下面是具体的步骤：

1、首先在首页中创建一个动态面板，将动态面板命名为windows1，显示如下

http://s11/middle/6721f25ctbe819d942bfa&690

然后在该动态面板中加入一个图像部件，导入长的图片，设置其标签为yuantu，如下图所示：

然后右键点击这个图片，选择“转换->转换为动态面板”，最后变成有两层的动态面板，动态面板管理器如下所示：

这里第一个动态面板完成了，下面是第二个动态面板。

2、创建一个和上面最先创建的动态面板一样大小的动态面板，然后在该动态面板中设置添加多两个动态面板，并重新命名动态面板，如下图所示：

在向左的动态面板中添加两个图像热区部件和两个按钮部件，其中按钮部件右键点击选择向右三角和向左三角，设置这两个按钮一个的形状表示向左一个表示向右。

如下图所示：

在图像热区中的onclick事件中添加用例，其中添加动作为“移动动态面板”，设置移动yuantu相对距离为-50,0，然后再添加一个如下图所示：

上面已经将第一图片切换为第一个图片做好了，接下来在第一图片以同样的方法设置第二个图片可以切换到第一和第三个图片，第三个图片可以切换到第二个图片。

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report