Axure原型设计基础项目七制作轮播图学习目标 1.掌握图片垂直滚动的设置方法。2.掌握图片水平滚动的设置方法。3.掌握图片自动轮播的设置方
法。4.掌握鼠标指针移入时图片停止循环的设置方法。5. 掌握鼠标指针移出时图片继续循环的设置方法。7.1 图片的垂直滚动 如果想在
页面中显示图片,但图片尺寸大于显示区域,可以通过设置滚动条来解决。(1)导入5张图片,调整为相同的高度和宽度,并同时转换成动态面板
。此时,元件属性面板会自动取消勾选“自动调整为内容尺寸”,如图7-1所示。图7-1 导入图片(2)在动态面板右侧添加垂直滚动条。在
元件属性面板中设置“滚动条”为“自动显示垂直滚动条”,如图7-2所示。图7-2 设置滚动条 (3)设置显示的页数。1)拖入一个矩形
元件,用于显示页数。改变其样式,并命名为“yeshu”,如图7-3所示。图7-3 矩形元件2)给动态面板添加交互事件:[滚动时]→
[设置文本]→[[This.scrollY/300+1]],用于获取页数,如图7-4所示。3)此时得到的数字是一个小数,通过命令t
oFixed()对超出指定位数的小数进行四舍五入,如图7-5所示。图7-4 添加交互图7-5 四舍五入7.2 图片的水平滚动 方法
同图片的垂直滚动的设置,只是在动态面板下方添加水平的滚动条。在元件属性面板中设置“滚动条”为“自动显示水平滚动条”,如图7-6所示
。图7-6 水平滚动条设置7.3 图片自动轮播 以5张图片进行循环为例,并确保5张图片尺寸一致。操作时,先放入1张图片元件并调整好
尺寸,其余4张只需进行复制即可。但是,这5张图片需要放置在动态面板的5个状态中,分别在5个状态中进行复制粘贴图片元件的操作,显然是
件麻烦的事情。对此,利用元件管理面板中的“复制状态”功能可使操作变得简便,另外,把这5个状态命名为“tu1”~“tu5”,如图7-
7所示。图7-7 自动轮播设置(1)先拖入一个图片元件,设置合适的尺寸,这里是520像素×310像素,如图7-8所示。然后,将其转
换为动态面板,并命名为“lunbotu”。这时,在元件管理面板中就能看到这个动态面板及其默认的首个状态“tu1”,拖入的图片元件就
包含在这个状态中。图7-8 拖入元件(2)在元件管理面板的元件列表中,选中“tu1”,单击4次“复制状态”按钮,这样就完成了状态和
图片的同时复制。(3)为每个图片元件指定不同的图片,在元件管理面板的元件列表中,双击两次图片元件即可打开文件选择窗口,选择本地的图
片文件。(4)返回页面,选中动态面板,为它添加触发事件:“载入时”中的用例动作为“设置面板状态”,“lunbotu”的“选择状态为
:”为“Next”,勾选“向后循环”和“循环间隔”的选项,并设置循环间隔为“2000”毫秒,如图7-9所示。图7-9 设置面板状态
(5)幻灯片自动播放的效果制作完成,但是图片的切换效果比较生硬,为了让图片切换有滑动的效果,需要设置“进入动画”为“向左滑动”“5
00”毫秒和“退出动画”为“向左滑动”“500”毫秒,如图7-10所示。图7-10 设置滑动效果7.4 鼠标指针移入图片停止循环
鼠标指针移入“lunbotu”动态面板时,图片停止循环,并在左侧和右侧分别显示不同的图标,单击左侧的图标,图片切换到上一张;单击右
侧的图标,图片切换到下一张。(1)制作左侧和右侧的图标,拖入矩形元件,输入“<”或“>”,设置样式,并分别命名为“left”和“r
ight”,如图7-11所示。图7-11 设置矩形样式(2)隐藏“left”和“right”。因为在页面加载时,这两个图标应处于隐
藏状态。(3)给“lunbotu”动态面板添加交互事件“鼠标移入时”,用例动作为“显示”和“设置面板状态”,“lunbotu”的“
选择状态为:”为“停止循环”,如图7-12所示。图7-12 设置面板状态(4)单击“left”,切换到上一张图片,为其添加的交互事
件为“鼠标单击时”,用例动作为“设置面板状态”,“lunbotu”的“选择状态为:”为“Previous”,设置“进入动画”为“向
右滑动”“500”毫秒和“退出动画”为“向右滑动”“500”毫秒,如图7-13所示。图7-13 设置面板状态(5)单击“right
”,切换到下一张图片,为其添加的交互事件为“鼠标单击时”,用例动作为“设置面板状态”,“lunbotu”的“选择状态为:”为“Ne
xt”,设置“进入动画”为“向左滑动”“500”毫秒和“退出动画”为“向左滑动”“500”毫秒,如图7-14所示。图7-14 设置
滑动效果7.5 鼠标指针移出图片继续循环 (1)给“lunbotu”动态面板添加交互事件“鼠标移出时”,用例动作为“隐藏”和“设
置面板状态”,“lunbotu”的“选择状态为:”为“Next”,勾选“向后循环”和“循环间隔”选项,并设置循环间隔为“2000”
毫秒,设置“进入动画”为“向左滑动”“500”毫秒和“退出动画”为“向左滑动”“500”毫秒。(2)如果只是这样设置,会出现错误,
因为“left”和“right”元件也在“lunbotu”动态面板上,要判断鼠标指针是否移出“lunbotu”动态面板的范围,就要
加上条件判断,如图7-15所示。(3)因为只要满足其中一个条件即可,所以设置“符合”为“任何”。(4)上边界和左边界各加15,下边
界和右边界各减15。因为鼠标指针移出这个动作是在瞬间完成的,而其记录的x、y坐标是轮播图里面的坐标,鼠标指针移出后是找不到x、y坐
标的,因此根据经验设置15像素这一数值,来确定鼠标指针是在轮播图范围以外。图7-15 设置条件项目小结 在动态面板中添加垂直滚动条和水平滚动条,可实现图片的滚动效果。通过对不同交互事件的设置,可以实现图片自动轮播效果、鼠标指针移入图片停止循环效果、鼠标指针移出图片继续循环效果。感谢观看 THANKS! |
|
