Axure 7.0实现图片轮播详细步骤

时间:2024-03-20 07:02:41

效果图:
Axure 7.0实现图片轮播详细步骤
在线连接:
https://3802ue.axshare.com

** 轮播部分详细步骤**
轮播部分的效果一共分为:滚动界面动画制作画面中的白色椭圆画面绑定和为图片设置超链接三个部分。

第一部分滚动界面动画
1、我们先导入一张图片到工作区,鼠标右键选择“转化为创建动态面板”。
Axure 7.0实现图片轮播详细步骤
右键点击状态1创建新增状态,在每个状态下添加一张图片,我这里就以4个状态为例。
单击动态面板在面板状态找到交互分栏里面的“载入时”事件,双击添加。
Axure 7.0实现图片轮播详细步骤
Axure 7.0实现图片轮播详细步骤
会弹出一个设置窗口,在原件栏中找到“设置面板状态”,双击添加参数设置如下:
Axure 7.0实现图片轮播详细步骤
点击确定按F5预览就会有一个简单的滚动效果。

第二部分制作画面中的白色椭圆
点击index(或者home)右下角页面那里主要是为了不在动态面板中建立椭圆。
然后在原件库找到椭圆形移动到工作栏调整合适的大小复制3个调整到合适的位置,顺手设置下圆形的边框改成无边框。
Axure 7.0实现图片轮播详细步骤
这个部分我们要让切换画面顺序跟4个椭圆的轮播相对应,当轮播到对应的圆圈会变黄色。
我们来做圆圈变黄的事件,点击第一个圆圈选择交互样式。
Axure 7.0实现图片轮播详细步骤
在弹出的交互设置中选择“选中”栏,勾选填充颜色选择黄色
Axure 7.0实现图片轮播详细步骤
其他两个椭圆的设置与第一个一致。
加下来就是让第一张图与椭圆1绑定,也就是说切换到第一张图的同时椭圆1被选中变成黄色。
选中动态面板,在属性中找到“状态改变时”的事件,双击添加,在设置中选择
Axure 7.0实现图片轮播详细步骤
之后在元件动作分栏找到“选中“动作双击添加,参数设置如下:
Axure 7.0实现图片轮播详细步骤
椭圆1设置“true“是表示当切换到图片1时椭圆1被选中,前面我们已经设置了椭圆被选中时变成黄色,所以这里椭圆1变成黄色。接下来就是一样的设置,当然了case2把state换成state2,椭圆1和3的值等于”false“椭圆2的值为”true“。椭圆3也是一样的道理我就不上图了。
Axure 7.0实现图片轮播详细步骤
最难的部分已经结束了下面来制作鼠标移入图片时停止滚动的动作。
还是点击动态面板,在属性栏找到“鼠标移入时”事件双击添加事件在弹出的设置框添加动作“设置面板状态”在选择状态中下拉选择停止循环。
Axure 7.0实现图片轮播详细步骤
然后就是鼠标移出时图片继续滚动的事件,一样的找到“鼠标移出时”的事件(动态面板上添加)双击添加,参数与之前设置的滚动参数一致。
Axure 7.0实现图片轮播详细步骤
接下来,我们要让鼠标移入椭圆1时画面切换到图片1。
这个事件应该添加在椭圆1上,单击椭圆1,在属性中找到“鼠标移入时”事件双击添加,在弹出的设置窗口选择“设置面板状态”,选择状态选择“state1”。
Axure 7.0实现图片轮播详细步骤
因为鼠标移入时画面停止滚动所以只需要选择state1(也就是图片1)即可。同样的椭圆2,椭圆3对应添加事件,选择状态为state2,state3即可。

第三部分画面绑定和为图片设置超链接

双击图片1在属性中找到“鼠标单击时”事件,双击添加,选择“链接”分栏找到“当前窗口”单击添加,设置如下:
Axure 7.0实现图片轮播详细步骤
在超链接中输入你谁需要跳转的网址,图片2、3操作与1一致,唯一不同的就是你所跳转的网址不一样。

参考:本文技术参考人人都是产品经理网的一位博主!