美文网首页axure
Axure之实现图片自动循环切换效果

Axure之实现图片自动循环切换效果

作者: 阿_毅 | 来源:发表于2017-03-25 11:15 被阅读297次

    开心一笑

    【男女的思维的确是不同,最近和老婆商量锻炼的事,因为我们俩都胖了,要开始锻炼。我第一个想到的是,安排在什么时间比较好;而她率先下单买了套运动服。昨天已经送到~~~】

    提出问题

    axure如何实现图片自动循环切换效果???

    唯美图片

    解决问题

    1.新建一个项目。

    2.在 index 页面下,拖入一个【动态面板】,宽:450,高:250,双击面板,在弹出的页面中,添加5个 state 状态。

    1

    **3.双击 【state1】,在弹出的页面中,拖入一个【图片】元件库。设置图片的大小和动态面板的大小一致, **

    2

    4.双击【图片】元件,给图片上传一张图片,设置图片宽度和高度与动态面板一致。

    4

    5.重复【步骤3】和【步骤4】,给 state2,state3,state4,state5上传图片,最终效果如下:

    5

    6.回到 【index】页面,拖入一个【椭圆形】元件到动态面板,调整椭圆形的宽度和高度到合适的大小,设置选项组名称为 Tag ,设置元件名称为 Tag5 。如下图:

    6

    7. 重复【步骤6】,复制粘贴第一个椭圆,总共复制4个一模一样的椭圆,同时设置选项组名称都为Tag,元件名称依次为:Tag4,Tag3,Tag2,Tag1。最终效果如下图:

    7

    8. 在【index】页面中,单击【动态面板】,在左边属性中,单击【载入时】事件,选择添加用例,在弹出的窗口中。

    1)添加动作中,选择【设置面板状态】,在配置动作中,依次按照下面图片中的箭头,选择状态:Next,勾选【向后循环】,【循环间隔2000毫秒】,单个状态耗时2000毫秒后切换等等,最后点击确定。

    8

    9.弄到这里已经完成大半了,坚持下去。还是在【index】页面,单击【动态面板】,在右边属性中,点击【状态改变时】,添加用例。

    9

    10.在弹出的窗口中,点击【添加条件】,在弹出的窗口中,选择【state1】,点击确定。

    10

    11.在【步骤10】的基础上,继续添加动作【选中】,在配置动作中,选择第一个【椭圆形】所对应的元件,假如是Tag1,点击确定。

    12

    12.重复【步骤9】【步骤10】和【步骤11】,依次添加【case2】【case3】【case4】【case5】,结果如下:

    13

    解释下:添加这些case的目的是,图片切换时,下面的小圆心的样式也可以跟着切换。只有这个目的。

    13.所有操作完成后,点击预览,在浏览器上查看效果。好了,大功告成,工资直接加500.

    13

    14.爱你~~~

    读书感悟

    来自 格雷戈·莫顿森《三杯茶》

    • 敬上一杯茶,你是一个陌生人; 再奉一杯茶,你是我们的朋友; 第三杯茶,你是我的家人,我将用生命来保护你。
    • 他让我,让我们所有人认识到:只要你相信自己,就能做成任何事情。
    • 人一旦有了恐惧,便失去了智慧。

    经典故事

    【一只猴子,肚子被树枝划伤,流了很多血。它见到一个猴子就扒开伤口说,你看我的伤口好痛。每个看见它伤口的猴子都安慰它,告诉它不同的治疗方法。它就继续给朋友们看伤口听取意见,后来它感染死掉了。一个老猴子说,它是自己把自己弄死的。痛,说一次就痛一次,不如自己默默愈合。启发:你若不坚强,懦弱给谁看~~~】

    大神文章

    【1】AxureRP8实战手册-案例12(动态面板:自动图片切换)

    其他

    如果有带给你一丝丝小快乐,就让快乐继续传递下去,欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持!

    相关文章

      网友评论

        本文标题:Axure之实现图片自动循环切换效果

        本文链接:https://www.haomeiwen.com/subject/jjfcottx.html