在绝大多数产品经理的工作中，都需要画原型，有许多组件都是重复使用的。例如做app时，上拉加载、下拉刷新的效果，轮播图效果等等。对于这些重复使用率较高的组件，我们可以建立一个自己的元件库，然后把它们做成元件，方便重复使用。

笔者是个新人，正在建立扩充自己的元件库，希望把这个过程写成文章，与大家分享。我用的是Axure8.0，可能文中的某些操作，7.0不支持，但制作思路基本相同。

前置条件：

在元件库中选择创建元件库，注意这里不是新建一个rp文件，如下图：

元件名称：

仿京东轮播图

功能描述：

1. n张图片间的定时切换，鼠标进入停止切换；
2. 点击上一张、下一张切换图片；
3. 点击页码切换到相应图片。

方法/步骤：

第一步：画出对应的组件

在这里我们需要一个存放图片的动态面板、一个存放页码的动态面板和上一张/下一张按钮。

1、拖进1个动态面板，名称为“图片存放”，在此面板中建立5个状态，用来存放5张图片。

2、拖进1个动态面板，名称为“页码标识”，在此面板中建立5个状态，用来存放页码的选中态。

在State1中拖进1个矩形，颜色设为白色，透明度30%，作为背景。

拖进5个矩形，作为页码，设置“1”背景色为黑色，字体为白色，表示选中。

在State1中全选，复制到State2，设置“2”背景色为黑色，字体为白色，表示选中，以此类推，如下图。

3、拖进1个矩形和1个向左的箭头，组合作为上一张按钮，名称“previous”。矩形线段颜色和填充颜色均设为黑色，不透明度为40%。按照此方法，再画一个下一张按钮，名称“next”。（我使用的是Axure8.0，icon中有箭头元件。）画完之后，组合，名称为“按钮”，设置为隐藏。

4、完成上述步骤之后，全选，转化为动态面板，名称为“轮播图”。

第二步：让图片动起来

在这我们除了要实现图片的轮播，还要实现页码同步切换。

1、选择“轮播图”动态面板，为其添加事件——“载入时”，如下图：

2、在播放图片的同时，页码也是要切换的。所以在载入时，除了要设置图片状态的切换，还要设置页码状态的切换，如下图。

注意，在设置页码标识循环时的选择跟图片是不同的，页码是不需要设置进入退出动画的。

第三步：鼠标的移入移出

这个步骤，我们要实现

鼠标移入：

图片、页码停止播放；

显示上一张/下一张按钮。

鼠标移出：

图片、页码开始播放；

隐藏上一张/下一张按钮。

1、鼠标进入时，图片是停止播放的，添加事件“鼠标移入时”，点击下方的“更多事件”，选择“鼠标移入时”。

这个时候一定要注意，只有图片停下来是不行的，我们还要让页码也停下来，如下图：

显示上一张/下一张按钮，如下图：

3、鼠标移出时，图片又开始播放，页码也要动起来，添加事件“鼠标移出时”，仍然在“更多事件”中，选择“鼠标移出时”，如下图：

隐藏下一张、下一张按钮

第四步：下一张、下一张按钮交互。

1、点击上一张切换图片，进入“轮播图”动态面板的State1，为previous添加交互事件，如下图：

一定要记住，在对图片进行切换操作时，也要对页码进行操作。

此时，网页预览之后，我们会发现一个问题，图片处于State1时，点击上一张没有变化。此时我们需要添加新的事件，编辑条件，让图片状态切换到State5，如下图：

在这里需要注意一个问题，case2一定要放在case1上面。

2、点击下一张切换图片。

按照上面的思路，对next添加点击事件。

第五步：页码点击交互。

1、进入“页码标识”动态面板State1，选择“2”，添加鼠标单击事件，如下图：

以此类推，为下面的按钮以及状态添加点击事件。

OK，至此我们的一个元件就完成啦，以后需要用到，只要导入元件，直接拖进来就可以啦。

作者：ningmengsuan

本文由 @ningmengsuan 原创发布于人人都是产品经理。未经许可，禁止转载。