很多小伙伴在浏览一些网站的时候，通常在网站首页里都会看到有轮播图！而我们使用Axure制作这样的轮播图效果的时候，应该怎么操作呢？下面就来教大家怎么操作吧~零基础小白想要自学Axure做产品原型，那么专业教学就可以事半功倍！选择的Axure自学视频课，就能够在最短的时间获取到最全面的Axure知识~感兴趣就就进~
Axure中继器制作图片轮播效果教程：
1.所需材料
中继器×1，图片×1，动态面板（循环面板）×1，左按钮×1，右按钮×1。如下图所示摆放2.中继器表格设置共两列，如下图填写即可，设置中继器水平布局no：图片序号，按123456顺序先写，用于轮播的交互逻辑。
picture：图片，右键导入图片，或者复制粘贴图片地址。
3.中继器的交互每项加载时，设置图片的值为item.picture中继器载入时，添加排序按no升序排列完成后将中继器转为动态面板（面板1），面板1转为动态面板（面板2）。这里要解释一下，面板1是用来做向左向右鼠标拖动的交互。面板2是因为中继器不能被选中做移动的交互，所以要将其转成动态面板。面板1的交互面板1的尺寸和图片的尺寸一样面板1载入时，移动面板1到-[[LVAR1.width]]，LVAR1.width代表图片的宽，因为点向左按钮的时候，要有一张可以做动态移动，所以需要默认向左移动一格。面板2的交互向左拖动结束时，触发右按钮事件鼠标单击时事件。向用拖动结束时，触发做按钮鼠标单击时事件。4.左右按钮的交互鼠标单击右按钮时，我们要做一个移动的动态效果，首先简单的讲解一下思路，点击时，先移动面板1一个图片的距离，然后更新行，将原来第1张的图片变成最后一张，最后一张变成倒数第二张以此类推，最后将面板1恢复原来的位置，这样就可以做下一次的移动。第一步，禁用该按钮（因为如果不禁用，连续点2下就会在第一次没移动完第二次就开始移动多了）第二步，移动面板1向左移动一个图片的距离，即-[[LVAR1.width]]，LVAR1.width代表图片宽度。动画选择线性500ms第三步，等待图片移动结束，设置等待550ms第四步，更新中继器，首先标记全部行，更新全部行的序号为原本的序号-1（即TargetItem.no-1），然后在更新序号为0的行更新至最后一行，[[TargetItem.Repeater.itemCount]]第五步，移动面板1到原来的位置，即[[LVAR1.width]]。这里注意时一瞬间完成的不要设动画。最后一步，启用该按钮。同理，鼠标单击左按钮也是这样做:第一步，禁用该按钮第二步，移动面板1向有移动一个图片的距离，即[[LVAR1.width]]，LVAR1.width代表图片宽度。动画选择线性500ms第三步，等待图片移动结束，设置等待550ms第四步，更新中继器，首先更新最后一行[[TargetItem.Repeater.itemCount]]，更新其序号为0。然后标记全部行，更新全部行的序号为原本的序号+1（即TargetItem.no+1）。第五步，移动面板1到原来的位置，即-[[LVAR1.width]]。这里注意时一瞬间完成的不要设动画。最后一步，启用该按钮。5.制作自动轮播我们用循环动态面板制作自动轮播的效果，首先将面板添加一个state2载入时设置面板状态为next（向后循环，间隔3000ms）状态改变时，触发右按钮鼠标单击时事件6.整个组合的事件最后，我们把所有元件组合，做一个鼠标移入组合时不自动轮播的效果鼠标移入时，显示左右按钮，设置循环动态面板的状态为停止循环鼠标移出时，隐藏左右按钮，设置循环动态面板的状态为next（向后循环，间隔3000ms）最终效果：以上就是关于“Axure中继器怎么制作图片轮播效果？”的全部内容分享了，希望能够帮助到你~更多Axure技巧学习，尽在！Axure相关文章、Axure相关问答、Axure专业自学视频课都是你学习提升的好帮手~想要快速有效的学习掌握Axure，那么Axure视频课就真的千万不要错过了！专业讲师、全面知识点、从0到1逐渐掌握~下面为各位小伙伴推荐几套Axure相对热门的基础课：
