Question

Axure怎样使用动态面板制作轮播图？

Answer 1

轮播图更好的将商品以及内容展示，这是很多的网站以及APP所喜欢制作的！对于新手而言，学会Axure轮播图制作是很重要的！因此，今天就为大家详细教一教大家怎么制作轮播图！如果你打算自学Axure原型设计的话，推荐的Axure自学视频课，专业讲师传授知识点，可以0基础学会软件功能操作以及动手实操~

Axure使用动态面板制作轮播图方法：

所需元件

一个转换为动态面板的矩形并命名为轮播图：

这里要记得把“自动调整为内容尺寸”勾选取消掉，方便后面调整图片大小。

三张图片并给图片编号1、2、3：

三个椭圆并给椭圆对应编号1,2,3：

操作步骤

（1）建立三个面板并分别命名为“图1”、“图2”、“图3”

（2）将三张图分别放到三个面板下

（3）为动态面板设置第一个交互动作——载入时，使其自动轮播。

（4）看看效果

到这一步我们已经实现了轮播图的自动轮播，但是椭圆元件还只是摆设作用，接下来让我们为椭圆也加入交互。

（5）将三个椭圆放到一个选项组内

按住Ctrl键并用鼠标分别点击三个椭圆，在“设置选项组名称”里填入group。

这里选项组的作用是保证这三个椭圆当有一个是选中状态时，其他两个都将是非选中状态。

（6）为每个椭圆设置相应的交互动作——鼠标单击时，以及交互样式——选中

1）椭圆1：

交互动作：

这里需要注意，因为图1在最左边，所以“进入动画”是“向右滑动”。

交互样式：

2）椭圆3：

交互动作：

图3在最右边，所以“进入动画”是“向左滑动”。

交互样式：

与椭圆1相同。

3）椭圆2：

交互动作：

因为椭圆2处于中间，所以我们需要增加判断条件：

最终椭圆2的交互动作为：

交互样式：

与椭圆1相同。

4）动态面板：

我们再为动态面板交互动作——载入时，增加一个椭圆1状态为选中。

（7）再看看效果：

（8）当我们点击了椭圆时，会发现轮播图的自动轮播效果没了，如果想要实现点击椭圆后轮播图继续轮播只需要再在每个椭圆的交互动作后面增加动作：

到这里我们的轮播图就完成啦！

以上就是关于“Axure怎样使用动态面板制作轮播图？”的内容分享了，希望能够帮到你！更多Axure精彩分享，尽在Axure相关文章！Axure因其能够快速、高效的创建原型，备受众多产品设计人员所使用！对于想要快速学会Axure原型设计的小伙伴，就可以选择精选的Axure自学视频课！不要犹豫，选择合适的课程开始学习体验吧~