Axure RP 9轮播图的制作
1.先保存五张图片(几张都可以)。2.将元件库里的“动态面板”拉到制作面板。3.双击点开“动态面板”,在上面有状态1(State1),点击它,可以添加状态,我们保存了五张图片就再添加四个状态。状态框大小可以设置为1000*400。4.在每个状态里面放入元件库中的“图片”,并导入保存的图片。图片大小自然也是1000*400。5.将这个动态面板命名为“轮播图”。6.将元件库里的“圆形”拖拽到制作面板中
1.先保存五张图片(几张都可以)。
2.将元件库里的“动态面板”拉到制作面板。
3.双击点开“动态面板”,在上面有状态1(State1),点击它,可以添加状态,我们保存了五张图片就再添加四个状态。状态框大小可以设置为1000*400。
4.在每个状态里面放入元件库中的“图片”,并导入保存的图片。图片大小自然也是1000*400。
5.将这个动态面板命名为“轮播图”。
6.将元件库里的“圆形”拖拽到制作面板中,大小设置为25*25,可以将其复制粘贴为五个,并且给每个圆形分别命名为轮播按钮1,2,3,4,5。将其组合起来,组合名命为轮播按钮组合。
7.每个轮播按钮都需要新建交互:
(1)单击时:
a.设置面板状态:目标选为轮播图,STATE设为“State1(State2,3,4,5)”,进入动画为“逐渐”“200”毫秒。
b.设置面板状态:选中轮播图,STATE选择“下一项”,勾选向后循环,进入动画设置为“逐渐”,动作时间设为“200(或300)”,点击“更多选项”,勾选循环间隔,设为2000毫秒。
(2)载入时:点击“设置选中”,目标选择“轮播按钮1”。(只设置轮播按钮1)
8.每个轮播按钮都设置交互样式:在交互页面底部有交互样式,点击“添加交互样式”,点击“元件选中”,勾选“填充颜色”,设置自己需要的颜色。
9.单击右键将轮播按钮组合设置为选项组,命名为“按钮”。并且将每个轮播按钮都设置为选项组“按钮”。
10.点中轮播图,新建两个交互:
(1)点击“载入时”,再点击“设置面板状态”,选中轮播图,选择下一项,勾选向后循环,进入动画设置为“逐渐”,动作时间设为“200(或300)”,点击“更多选项”,勾选循环间隔,设为2000毫秒。
(2)点击“状态改变时”,点击“添加情形”,分别设置五个情形(情形1,情形2,情形3,情形4,情形5),并在每个情形下添加动作,点击“设置选中”,目标选我们需要的元件,轮播按钮1,2,3,4,5。如图依次设置情形:
11.将其在浏览器中预览。
更多推荐
所有评论(0)