Axure实战案例3—商品切换功能

这一章节主要讲如何使用函数来制作商品切换

主要有三个部分：翻页功能、商品展示区、商品项

点击“上半角”，商品展示区会向前翻页，同时商品项中会选中对应的商品。

点击“下半角”，商品展示区会向后翻页，同时商品项中会选中对应的商品。

点击“商品项”中的某一张图，商品展示区都会对应显示被选中的那张图。

首先“翻页”功能可以使用动态面板的来设计，动态面板设置4种状态，分别放置对应的商品图。而商品项的商品如何对应商品展示区里面的图片呢？每次点击一个商品，动态面板就要切换到对应的商品的状态里面。可以设置动态面板里面的状态名称与商品项中的商品名称一致。

（1）商品项的原型设计

先将一个图片，设置“鼠标移入”、“鼠标单击”、“选中”的时间，如下图所示：

然后copy出3个，导入相应的图片，该相应的名字。并且将这四个元件设置为元件组，命名为“FoodItems”。