axure轮播图怎么设置循环轮播_使用axure动态面板制作轮播图效果

轮播图是网站、移动app首页中经常用到的视觉交互形式,本文中我们使用axure制作一个动态轮播图的案例。

达到的效果描述如下:

1.页面加载时自动向后轮播;

2.点击[1]处向前切换图片,切换后再次自动向后轮播;

3.点击[2]处向后切换图片,切换后继续自动向后轮播。

步骤:

1.在设计区域中拖入一个图片元件,调整大小,双击导入图片;

2.右键图片->转换为动态面板,并命名为p_w_picpaths,如下图:

3.双击p_w_picpaths,在面板状态管理器中,复制state1三次,最终达到4个状态,如下图:

4.在图层面板中双击进入四个状态编辑区域,修改剩余三张图片样式,如下图;

5.在自带的Icons元件库中,拖入左右两个箭头到p_w_picpaths上方,调整大小;

6.在页面中,双击“页面载入时”,在用例编辑器中,设置面板状态p_w_picpaths为next,勾选向后循环、循环间隔、首个状态延时复选框,间隔的时间可以自己设置,一般3000毫秒比较好,我为了省事直接默认了~进入推出动画都选择向左滑动&

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值