在Axure中实现图片轮播的方法有哪些?栏目:装修   发布于:2018-12-11 11:51

在Axure中实现图片轮播的方法有哪些?
[ 标签:淘宝图片轮播 ]

  • 全部评论(0
  • 1楼
    努力拼搏的80后 2018-12-11 12:51:42

    实现轮播的方法有很多,都最主要的都是利用动态面板的状态切换来完成,通常轮播分为页面加载自动轮播和点击轮播两种。



    页面加载轮播:首先准备一个动态面板,并为动态面板添加多个状态,每个状态面板放置需要轮播的图片。为页面添加“页面加载时”事件,添加“设置面板状态”动作,动作配置里,选择自动向后轮播,选中循环,选择进入和退出的轮播动画,一般是向左滑动或者向右滑动,设置动画时间。

    点击轮播:动态面板的准备工作和上面一样,这里说下交互。为触发交互的按钮或图片,添加“鼠标单击时”事件,添加“设置面板状态动作”,切换下一个面板状态,向后循环,设置进入和退出的动画效果。



  • 2楼
    米思温 2018-12-11 12:21:42

    谢邀。


    本文是用Axure 8.0实现轮播图的教程,接下来将结合实例进行分步骤讲解;该教程非常适用于Axure初学者;

    要想快速掌握Axure,最重要的一点就是要勤快练习,才能熟能生巧。

    前期的部件准备

      在画布上使用占位图部件画个线框图;

      banner位置的占位符转换为动态面板鼠,标右键,转换动态面板;

      给动态面板命名,选中在面板在右侧填写动态面板名称,这个命名不强制要求,只要你看得懂就行,在这我命名为banner。

      双击动态面板弹窗动态面板状态管理页面,在这里我们要做了4张banner的轮播效果,添加四个面板状态并各自命名,点击其中一个面板状态右击可对该面板状态命名。

      点击面板状态,蓝色框内的部件将会在面板里显示,框外的不显示。

      添加四个banner轮播图的状态按钮,在本文各命名矩形1、矩形2、矩形3、矩形4。


      开始动态效果的交互设置

        banner图的设置

        ①载入时设置,效果显示是页面载入时可自动进行轮播。


        ②鼠标单击时,效果显示是点击banner轮播图上的其中一个状态按钮显示相应的图。



        ③状态改变时,全局设置轮播图状态按钮的选中时的触发条件。


        分步说明

        第一步:设置选中的状态值为“true”


        第二步:设置全局变量值


        第三步:触发事件的设置


        2. 动态面板状态的设置

        对banner轮播图的四个状态矩形1、矩形2、矩形3、矩形4

        按钮进行设置,两种情况说明:在当前显示的状态进行向左向右触发状态按钮时的交互。


        if条件的分步说明

        第一步:条件设置


        第二步:设置选中状态下的值


        第三步:设置动态面板的状态


        else if条件的分步说明

        第一步:设置选中状态下的值。


        第二步:设置动态面板。


        注意:用例是一项一项执行,面板状态要和对应的banner状态一致,全部面板状态设置好就可以点击F5预览原型效果了。


说点什么吧

相关文章