AXURE-035-组件-图片轮播
封面
hi，大家好，我是18岁fantasy。本期小组件为一个图片轮播效果，支持自动轮播和鼠标点击切换效果，主要用到axure的动态面板轮训及动态面板相关事件，全局变量等知识。具体动效如下：
动画效果
动效
实现方式
1、图层分析。
整个示例由动态面板、左右切换按钮、图片定位（简称图片索引）显示元件组成，其中动态面板的个数和图片索引的个数必须一致。具体如下：
图层组成
重点是动态面板的状态值（value）要个图片索引的名称（name）设置成相同的。方便切换时对应，具体命名和图层顺序如下：
元件
事件设置
原理说明：
1、设置两个全局变量记录图片索引色块的初始位置x值（move_index）和当前动态面板的状态值(pic_index)。
2、页面加载时，开始轮播动态面板，动画效果设置为向左滑动，每隔2000毫秒切换到下一个。
自动切换状态
3、动态面变切换时，触发动态面板的转改改变时事件。设置当前动态面板的状态值(pic_index)。然后通过动态面板当前的状态值（如：0/1/2/3）计算出索引定位色块的移动位置。色块的移动位置计算公示：色块初始位置（move_index）+动态面板的状态值(pic_index)*两个索引位置的间距。并移动色块到计算的位置。
色块移动
4、以上是自动切换的效果。如果在自动切换过程中，要鼠标支持点击切换，想看哪个图片看哪个图片，则需要为左右切换按钮和图片索引块设置鼠标点击事件。
左右切换
具体设置内容为，点击左按钮，设置动态面板向前切换，动画效果为向右滑动；点击右按钮，设置动态面板向后切换，动画效果为向右滑动，同时要重新出发第2个步骤（应为人工点击之后自动切换就失效了，需要重新触发）：
手动设置
为图片索引元件设置鼠标点击切换事件：
具体事件设置内容为：
点击图片索引，切换动态编办的状态和图片索引名称一样的值即可（这里就可前面的要求一致了，图片索引的名name要和动态面板的value对应，并且都从0开始）。
鼠标切换
以上便是本次元件的所有内容。
原件下载
关注公总号后，回复“A035”即可下载本次分享的元件完整文件。
感谢阅读和关注！
公众号
