AXURE实现两种轮播

哇~真的是好久不见了(/ω\)
AXURE我已经实现了从入门到放弃N次了,真真是屡战屡败,屡败屡战,哈哈哈,还得给我的不放弃精神点个赞吧,欧耶✌️
废话不多说,马上进入正题~
前情提要:
网站上想做个滚动播放消息的模块,我目前看到的垂直方向上的滚动大致可分两种,一种是只展示一行文字,另一种是展示多行,每行依次上移。
进入正题
先看第一种,为了区别,这种就用图片展示吧,换成一行文字同理。效果如下:

在这里插入图片描述
首先,拖入一个动态面板,并增加三个状态(本例用了3张照片,所以就用3个状态啦~)
在这里插入图片描述
双击进入编辑页面,每个状态中插入一张图片
在这里插入图片描述
元素已备齐,然后就是加动态啦~
在该动态面板(滚动新闻)的properties里的onload事件中增加如下配置:
在这里插入图片描述
红框确保动画能够实现无缝首位连接。

第二种实现效果图:
在这里插入图片描述
首先,依旧是拉一个动态面板,因为新闻首尾相接同时显示,所以需要两个相同的列表
在这里插入图片描述
我这个表格行高是30,所以在该状态的onload事件里进行如下设置
在这里插入图片描述
我的例子中一共有7行,在第7行移出该动态面板的显示区域时,设置隐藏该动态面板;并在onHide事件中配置
在这里插入图片描述
即把两个table都移动到初始的位置,然后显示该动态面板;并在onShow事件中配置:
在这里插入图片描述
其实,和onload中的配置一模一样哒~
最重要的都是最后一步,隐藏动态面板,这样,就实现了循环调用!!!

扩展
突然觉得第一种方式横向滚动的话是不是就是banner轮播图的效果了,哈哈,回头尝试一下再来分享,拜拜啦┏(^0^)┛

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Axure中,可以通过使用交互式组件绘制一个继器轮播效果。首先,在Axure的工作区中创建一个新页面,然后选择一个继器组件。将继器组件拖放到页面上后,可以调整其大小和位置,以适应页面的需求。 接下来,我们需要为轮播创建一些内容。可以在继器组件内部创建多个动态面板,每个面板代表一个轮播的项目。点击继器组件,然后在交互面板的"内容"选项卡中添加所需数量的面板,并在每个面板上添加所需的内容,如文本、图像、链接等。 一旦轮播的内容创建完毕,我们需要为其添加交互行为。选择继器组件,然后在交互面板的"交互"选项卡中选择"动作",点击"添加动作"按钮。在弹出的菜单中选择“切换到下一个面板”或“切换到上一个面板”动作,具体根据需要进行选择。如果需要自动播放轮播,可以在动作菜单中选择“循环切换到下一个面板”,并为每个面板设置时间间隔。 最后,为了使轮播生效,需要在页面的加载行为中添加一个动作。选择页面外面的世界节点,在交互面板的"交互"选项卡中选择“动作”并点击“添加动作”按钮。在弹出的菜单中选择“切换到下一个面板”动作,并将其拖放到页面加载后的动作列表中。 通过上述步骤,我们就可以在Axure中创建一个继器轮播效果。在预览模式下,可以查看轮播的效果,并根据需要进行调整和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值