Axure怎么制作商品详情页产品图展示效果?

一、基础方法

1. 素材准备
   • 从网上找一些图片素材，分两批，一批大图，一批小图。
2. 动态面板设置
   • 拖入一个动态面板，命名为d，大小为387×121，将小图按照顺序排列好，根据美观度自主调节图片间距。
   • 点进d的状态1，将小图全部选中转换为动态面板，命名为d1，d1展示全部的5张小图，而d则展示4张小图。
3. 矩形框设置
   • 在d1中拖入一个矩形框，外框设置为红色，颜色设为透明。
4. 大图设置
   • 将大图放置在小图的上方，并转换为动态面板，命名为d_big。
5. 小图命名与事件设置
   • 给五张小图分别命名：small_1、small_2、small_3、small_4、small_5，设置鼠标移入移出事件，当鼠标移入时，设置红色外框（命名为wk_red），移动到小图的坐标位置（x，y），这里用到函数[[LVAR1.x]]、[[LVAR1.y]]，其中LVAR1代表的是元件小图，同时设置大图根据小图进行状态切换。
6. 箭头设置
   • 在小图两边画上左右箭头，点击左箭头，让d1向左移动一定距离（向左距离为负值），点击右箭头，让d1向右移动一定距离（向右移动为正值）。

二、能力提升相关操作

1. 矩形框操作
   • 先拖入一个大小为200×200的矩形框，背景色设置为#666666，透明度为50%，命名为follow_1，然后按住ctrl键，复制出三个，分别命名为follow_2，follow_3，follow_4。
2. 文本框操作
   • 在画布空白区域，拖入四个文本框，分别命名为：follow_1_x，y，follow_2_x，y，follow_3_x，y，follow_4_x，y。
3. 页面载入事件设置
   • 设置页面载入时事件，获取follow_1 - 4的坐标值。
4. 动态面板操作
   • 拖入动态面板，命名为j_big，将四张切割图按照顺序，放入动态面板中。
5. 鼠标悬停事件设置
   • 设置鼠标的悬停事件，当鼠标处于不同区域时，显示不同标记的follow，并且设置不同follow显示时，对应右边图片也跟随变换。

需要注意的是，这种实现这个效果的方法是最基础的方法，并不是最简便或最完美的方法，还有实现起来复杂但效果更逼真、更方便的方法可以自行研究。