在上一节中我们讲到了“图片自动跳转或点击跳转”,这一节我们一起来看另一种图片点击跳转的做法。
        

　　上次的案例（如下）

　　

　　两个案例的不同之处在于点击的方法不同，上次的案例是点击一个小图，大图跟着变。

　　这次的案例是点击同一个按钮<上一个>或<下一个>进行变换。

　　好的，那我们现在开始操作

　　步骤一：打开Axure，我们为其建立一个背景图，大小：560*270（可以自行定义背景，觉得怎样好看，就怎样设置背景）；

　　

　　步骤二：从<部件面板>添加<矩形>控件，大小：500*210；

　　步骤三：从<部件面板>添加<动态面板>控件，大小：480*190，设置几个状态用来放图片。本案例中6个状态，分别放一张图。命名为：动态面板——图片，几个状态——1,2,3,4,5,6；

　　 

　　 

　　 

　　步骤四：从<部件面板>添加<图像>控件，放在两边，点击<图像>控件，打开<自动缩放对话框>，选择“是”，则出来的图片是图片本身的大小，选择“否”，则出来的图片是<图像>控件的大小，这里选择“是”，分别命名为：上，下

　　 

　　 

　　接下来我们要做的就是添加条件，进行互动

　　步骤五：

　　选中图片“上” ，点击<部件面板>的Onclick事件，打开<用例编辑器>面板，添加条件

　　

　　如果动态面板状态等于“1”，则设置动态面板状态为指定状态到“6”（即最后一个），即是“现在的这个”的“上一个”是什么就《设置动态面板状态为指定状态》设置到“那个”。

　　 

　　同理设置其他几个

　　如果动态面板状态等于“2”，则设置动态面板状态为指定状态到“1”

　　如果动态面板状态等于“3”，则设置动态面板状态为指定状态到“2”

　　如果动态面板状态等于“4”，则设置动态面板状态为指定状态到“3”

　　如果动态面板状态等于“5”，则设置动态面板状态为指定状态到“4”

　　如果动态面板状态等于“6”，则设置动态面板状态为指定状态到“5”

　　同理设置选中图片“下” ，

　　如果动态面板状态等于“1”，则设置动态面板状态为指定状态到“2”

　　如果动态面板状态等于“2”，则设置动态面板状态为指定状态到“3”

　　如果动态面板状态等于“3”，则设置动态面板状态为指定状态到“4”

　　如果动态面板状态等于“4”，则设置动态面板状态为指定状态到“5”

　　如果动态面板状态等于“5”，则设置动态面板状态为指定状态到“6”

　　如果动态面板状态等于“6”，则设置动态面板状态为指定状态到“1”

　　总结，至此我们就完成了添加动态面板的交互操作，是不是很简单，简简单单的增加互动元素会让你在演示原型的时候给观看者带去生动的演示，还等什么赶紧一起来试一下吧。祝大家工作愉快。

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。