学习本篇教程前，请先掌握《动态面板的应用（1）》、《动态面板的应用（2）》和《动态面板的应用（3）》。
当然，你硬上我也拦不住...
快乐还是痛苦，你自己选吧！
36kr当前网站首页有个幻灯片循环播放模块，我们俗称叫图片轮播。
在图片轮流切换时，下方有对应的蓝线以进度条的方式呈现。
值得注意的是，在一次循环切换过程中，已经加载过蓝线进度条不会消失，而是在重新切换回第一张图片时才会全部恢复初始状态。
模块稍有些复杂，我们一步一步的来实现。
先完成图片的自动循环切换，以及点击左右箭头按钮时切换图片的功能。
一、准备所需要的元件。
在画布中放入一个图片元件，双击后倒入第一张幻灯片图片。
在图片的下方往上一些的位置放入一个文本标签元件，输入对应的文字内容，字号设置为20。
然后，全选这两个元件，点击鼠标右键，菜单中选择[转换为动态面板]。
这样，就将图片与文本放入了一个动态面板的第一个状态中。
在概要功能面板中，点击状态名称后方的[重复状态]按钮，将状态重复为6个。
温馨提示：每次都是点击最后一个状态名称后方的重复状态按钮。这样，能够顺序保持状态名称的序号。
接下来，进入动态面板新增的每一个状态，修改状态中图片与文字。
图片可以在概要面板中直接双击导入新的图片。
文字可以在每次导入新图片后，在自动打开的编辑区中修改。
温馨提示：文本标签的文字不能在概要面板中修改，概要面板中的文字是元件的名称。
温馨提示：第5个状态“State5”只有图片，没有文字，可以将重复出来的文本标签元件删除。
到这里，动态面板以及内部的元件全部编辑完毕。
我们回到页面中，先给动态面板命名为“幻灯片”。
再在动态面板的两侧各添加一个箭头图片，并在样式面板中，将两个箭头的[不透明性]设置为[50%]。
然后，组合这两个箭头图片，命名为“箭头”，并隐藏这个组合。
二、添加交互事件。
交互有两个，一个是图片的自动切换，另一个是点击箭头切换图片。
1、图片自动切换的交互。
在画布中点中动态面板，添加[载入时]的交互事件。
让动态面板[载入时]将[设置面板状态]为[下一项]，并且[向后循环]，动画都选择[向左滑动]，更多选项中将切换的循环间隔设置为“5000”毫秒，并且勾选[首个状态延时5000毫秒后切换]。
此时，在浏览器中查看原型的话，幻灯片已经能够自动循环切换了。
2、点击箭头切换图片的交互。
首先，鼠标指针进入动态面板时要显示箭头按钮。
为动态面板添加[鼠标移入时][显示][箭头]组合的交互，并在更多选项中选择[弹出效果]，以便光标离开幻灯片区域时能够自动隐藏箭头组合。
然后，在概要面板中点中左箭头图片，为左箭头添加[单击时][设置面板状态]为[上一项]的交互，动画选择[向左滑动]，并勾选[向前循环]。
此时要注意，当点击按钮切换动态面板状态时，会结束自动循环。
所以，在切换了图片之后，还要再次让动态面板自动循环起来。
交互动作和动作面板[载入时]的动作一样。
另外，也可以通过添加[触发事件]的动作来解决。
点击添加动作的按钮。
再次[触发事件]，触发[幻灯片]的事件。
点击[添加事件]按钮，选择[载入时]事件。
右箭头的交互和左箭头相似，只是将[上一项]改为[下一项]，[向右滑动]改为[向左滑动]，[向前循环]改为[向后循环]。
到这里，我们就完成了幻灯片自动切换以及点击箭头按钮进行前后切换的交互。
在下一篇教程中，我们继续完善图片切换后时进度条功能。
温馨提示：案例中所使用的素材，可以使用源文件生成HTML文件之后，到HTML文件夹下的Image文件夹获取。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 带有进度条的图片轮播（上）