Axure 图片轮播效果

我发现网上关于轮播效果的讲解不太多,自己参考了一些再加上自己的实践,总结出了一套比较详细的制作教程,希望大家指正。

打开Axure

  1. 新建一个空文件,在空白页面中拉入一个动态面板,可自定义名字为banner;
  2. 在banner 动态面板中添加三个状态,可命名为第一张、第二张、第三张;
  3. 分别在每个状态中放入要轮播的图片,和标签设置。

Axure 图片轮播效果

设置轮播滑动状态页面

1.回到主页面拉入一个动态面板,与banner 动态面板重合,可命名为焦点图;
2.在焦点图动态面板中添加三个状态,可命名为第一帧、第二帧、第三帧;
3.分别在每个状态中放入要轮播的图片和标签设置,步骤同上。

设置自动轮播效果

1.回到主页面,点击空白处,设置事件<页面加载时>;设置焦点图和banner动态面板交互事件;
2. 选择banner图片动态面板,把状态设置为Next,勾选向后循环循环间隔,同时设置好进入动画和退出动画向左滑动。
3. 重复以上步骤操作设置焦点图动态面板效果,其中将进入动画和退出动画设置为逐渐
4. 预览查看自动轮播效果。
Axure 图片轮播效果

右击/左击手动切换

1.添加一个左侧按钮和右侧按钮;
2.添加用例,鼠标单击时,设置banner 动态面板向左/向右滑动;
在设置banner 为next 的动画效果;

Axure 图片轮播效果

Axure 图片轮播效果

相关文章: