Banner轮播是原型图中最常见的模块之一，无论是电商类的app还是小说类，视频类app都离不开它；
运营喵的世界首页就有一个banner轮播。
轮播的特点主要有自动切换到下一张图片，图片到达末尾之后从头开始循环。
此外，下方的图片导航也需要随着图片的切换而切换，告知用户当前图片的位置。
用户可以通过图片中的箭头左右切换图片，也可以使用下方的导航条来切换图片。
- 【页面载入时】自动轮播图
- 可左右单机交互的轮播广告
- 带有状态指示器和左右的轮播
- 指示器&&自动轮播
- 淘宝首页的轮播
方法一：【页面载入时】自动轮播图
1、整体思路
观看整个轮播效果，是在打开页面的时候，在页面上并没有进行任何操作，就在进行自动轮播，由此可见，这个是【页面载入时】事件，而我们制作轮播效果最常用的原件就是“动态面板”。
预览地址：点击此处预览
2、制作方法详解
1、基础原件添加
从左侧的元件库里拖动“动态面板”到右侧的画布，然后在每个状态里添加一张图片。
动态面板添加基础图片元件
2、页面载入时添加交互事件
从“整体思路”得知，是在页面‘载入时’添加交互事件，并设置‘动态面板’事件。
‘页面载入时’交互事件
‘动态面板’交互事件
注意：循环间隔毫秒设置，1000毫秒 = 一秒；
通过这样的设置过后，然后在浏览器预览，就可以看到‘页面载入时’自动轮播效果。
方法二：可左右单机交互的轮播广告
1、整体思路
观看整个轮播效果，是在打开页面的时候，图片并没有自动轮播，而是点击“左”、“右”再进行轮播，而我们制作轮播效果最常用的原件就是“动态面板”，并添加左右交互事件。
预览地址：点击此处预览
2、制作方法详解
1、基础元件添加
在画布里添加“动态面板”元件，并在状态里添加图片，并为“动态面板”命名为【ad】。
并添加两个圆形，分别命名为【left_arrow】、【right_arrow】
基础元件添加
2、添加“鼠标单击时”交互事件
分别为向左和向右的圆形添加“鼠标单击时”交互事件。
左右箭头添加交互事件
3、详细设置“鼠标单击时”交互事件
为“左”、“右”箭头设置“动态面板”交互事件，向左箭头【left_arrow】设置“动态面板”事件为“Previous”，并勾选“向前循环”；向右箭头【right_arrow】设置“动态面板”事件为“Next”，并勾选“向后循环”；
注意：向左和向右箭头的交互事件，都不要勾选“循环间隔毫秒”。勾选过后，会在点击事件过后，进行间隔事件后，自动轮播。
通过这样的设置过后，然后在浏览器预览，就可以看到‘页面载入时’自动轮播效果。
方法三：带有状态指示器和左右的轮播
1、整体思路
整个轮播效果可以拆分为以下几块：
- 页面打开时，页面并没有自动轮播，所有无【页面载入时事件】；
- 点击“左”、“右”再进行图片轮播，而下方的指示器也跟随者变换；
- 鼠标移速指示器时，后面的图片也跟随者变换；
预览地址：点击此处预览
2、制作方法详解
1、基础元件添加
从左侧的“元件库”里添加两个“动态面板”，分别命名为【ad_nav】和【ad】，在添加两个圆形，分别命名为【left_arrow】、【right_arrow】。
动态面板【ad】，添加三个状态，每个状态里都添加一张图片。
动态面板【ad_nav】，添加上个状态，每个状态里添加三个圆，大小为【20*20】，圆角为10。三个状态制作过后的效果如下，并分别在第一个状态里的第一个圆添加一个背景色；第二个状态里的第二个圆添加背景色，第三个状态的第三个圆添加背景色；
2、添加“鼠标单击时”交互事件
分别为向左和向右的圆形添加“鼠标单击时”交互事件。
左右箭头添加交互事件
3、详细设置“鼠标单击时”交互事件
为“左”、“右”箭头设置“动态面板”交互事件，向左箭头【left_arrow】的“鼠标单击时”交互事件设置“动态面板”【ad_nav】和【ad】事件为“Previous”，并勾选“向前循环”；
向右箭头【right_arrow】的“鼠标单击时”交互事件设置“动态面板”【ad_nav】和【ad】事件为“Next”，并勾选“向后循环”；
经过这样的设置，可以是实现，点击左右箭头，图片和下面的指示器都可以轮播了。
4、鼠标移入指示器显示对应图片
为“动态面板”【ad_nav】的三个状态里面的三个小圆，添加【鼠标移入时】交互事件；并设置“动态面板”交互事件；
第一个圆，对应的动态面板【ad_nav】状态一和【ad】状态一；第二个圆对应动态面板【ad_nav】状态二和【ad】状态二；第三个圆对应着动态面板【ad_nav】状态三和【ad】状态三；
动态面板【ad_nav】的三个状态里面三个小圆，都设置对应的交互事件，就可以啦，整个可点击轮播效果都实现啦。
方法四：指示器&&自动轮播
1、整体思路
首先，我们先来看一下要实现的案例效果。
指示器&&自动轮播实现效果图
我的思路是这样的：
- 让底部的圆点标签有唯一选中的效果；
- 每一个圆点标签选中时都做三个动作，设置动态面板状态为对应的状态、等待一定时长以及选中下一个圆点标签；
- 页面打开时，选中第一个圆点标签，这样就能开启幻灯片的轮流播放；
预览地址：点击此处预览
2、制作方法详解
1、先让圆点标签有唯一选中的效果
接下来，我们先准备好元件，并为元件命名。
我们需要做三件事，来完成这个需求，这里我们先完成其中的两件。
- 全选圆点标签，为它们设置一样的【选中】时的交互样式；这一步是为了圆点标签变为选中状态时能够改变颜色。
- 继续在上一步的功能界面中，为全部圆点标签【设置选项组名称】为“Tag”；这一步是为了让一组圆点标签中，只有一个能够变为选中状态。
2、我们给任意一个圆点标签添加交互，以第一个圆点标签“Tag1”为例。
在圆点标签被【选中时】，要将动态面板“SlidePanel”切换到对应的状态从而显示对应的广告图片。
这里大家注意，【设置面板状态】的动作设置中，我们要将目标元件“SlidePanel”的状态选择为【Value】，也就是值。
选择之后，在下方出现了新的设置“状态名称或序号”，也就是说我们可以通过动态面板状态的名称或序号，将动态面板切换到指定的状态。
这里我们要用的是序号。
动态面板状态的序号就是在概要面板中，各个状态由上至下排列的顺序号。
也就是当我们点击圆点标签“Tag1”的时候，要把动态面板切换到序号为“1”的状态；
点击圆点标签“Tag2”的时候，要把动态面板切换到序号为“2”的状态；以此类推。
那么，这个序号我们可以填写固定的数字。
不过，大家能够看到圆点标签名称的最后一位字符就是与序号相同的数字，如果我们取到这个数字，填在输入框中，也可以完成这个设置。
这个数字我们可以通过公式“[[This.name.slice(-1)]]”来获取。
公式中“This.name”可以获取到当前被选中的圆点标签的名称。
而“.slice(-1)”是字符串截取函数，它可以输入两个参数（截取的起始位置和终止位置），也可以输入一个参数（截取的起始位置）；当只输入一个参数时，能够对字符串对象从起始位置截取到末尾；并且。这个函数的参数可以为负数，输入负数的话，是从末尾进行倒数的位置；这里的“-1”，表示倒数第1位字符。
所以，公式“[[This.name.slice(-1)]]”的意思是获取“当前元件的名称的最后一位”。
填入公式之后，我们再设置一下状态切换的动画，就完成了这个动作。
3、继续上一步，我们再添加一个【等待】的动作，以便等待“2000”毫秒后，选中下一个标签。
4、继续上一步，添加【选中】下一个圆点标签的动作
因为是在给第1个圆点标签“Tag1”添加交互，这里我们选中下一个圆点标签就是“Tag2”。
这一步，就是圆点标签唯一选中效果要做的第3件事，把圆点标签变为选中状态。
5、完成了上面的几步之后，我们把第1个圆点标签【选中时】的交互复制，粘贴给其它三个圆点标签。
粘贴之后，从第2个圆点标签开始，逐一修改最后一个选中圆点标签的动作，为选中当前圆点标签的下一个标签。
6、为第1个圆点标签的【载入时】添加交互，【选中】当前这个圆点标签。
这样，在页面打开后，第1个圆点标签会被选中，从而触发第1个圆点标签的【选中时】交互，通过运行交互中的动作，在完成动态面板的状态切换以及等待2秒钟的动作之后，又通过最后一个【选中】下一个圆点标签的动作触发了下一个圆点标签【选中时】的交互。
以此类推，形成了循环的效果。
以上就是整个案例的实现过程。
方法五：淘宝首页的轮播
1、整体思路
首先，我们先来看一下要实现的案例效果。
指示器&&自动轮播实现效果图
我的思路是这样的：
- 图片向左滑动轮播，间隔3s，滑动动画500ms；
- 下方焦点，点击切换到相应的图片；
- 左右切换按钮，鼠标放入轮播图显示，悬置在按钮上颜色加深。
预览地址：点击此处预览
2、制作方法详解
1、先准备好元件
接下来，我们先准备好元件，并为元件命名。
先添加三个动态面板，分别为【l-r】、【ad_indicator】和【ad】。
动态面板【l-r】，状态一里面放置左右两个箭头图片，分别为left和right。
先隐藏动态面板【l-r】，然后再继续下一步操作。
2、实现自动轮播效果
可以设置页面级事件，也可以设置控件级事件，在这里我们设置控件级事件。
我们点击动态面板【ad】设置【载入时】事件，【ad_indicator】和【ad】状态为【Next】向后循环，间隔3000ms，切换动画左滑，动画时长500ms。
3、为每个指示器添加事件
现在我们要设置指示器事件，我们要设置鼠标点击每个指示器，并轮播到对应图片，等待几秒钟，在滚动到下一个状态。
动态面板【ad_indicator】的5个状态样式
先为动态面板【ad_indicator】状态一五个状态里面的圆设置，进行【鼠标单击时】事件设置；设置【ad_indicator】和【ad】状态，第一个圆对应着状态一，第二个圆对应着状态二，第三个圆对应着状态三，第四个圆对应着状态四，第五个圆对应着状态五；
动态面板【ad_indicator】的状态设置
为动态面板【ad_indicator】的其他几个状态，都按照上面这样操作。
以上设置是点击指示器，会显示对应的状态，打过几秒过后，又没有动作了，所以还需要设置后面的交互事件。
我们在【ad_indicator】的状态后面添加等待【3000毫秒】和【ad_indicator】和【ad】轮播事件。
点击指示器过后的轮播事件
4、显示向左向右元件
为动态面板【ad】，添加鼠标移入时和移出时事件，设置动态面板【l-r】可见性，并停止和恢复轮播。
设置鼠标移入动态面板【ad】，显示动态面板【l-r】，并停止动态面板【ad_indicator】和动态面板【ad】轮播。
设置鼠标移出动态面板【ad】，隐藏动态面板【l-r】，并恢复动态面板【ad_indicator】和动态面板【ad】自动轮播，轮播时间为3000毫秒。
鼠标移入和移出动态面板【l-r】的交互事件
5、动态面板【l-r】的左右点击事件
动态面板【l-r】状态一的向左箭头，添加【鼠标单击时】交互事件，设置动态面板【ad_indicator】和动态面板【ad】的状态为为“【Previous】”，并勾选“向前循环”；
以上操作点击过后，都只能向左，但点击过后就不会再有操作了，我们还需要为动态面板【l-r】设置点击过后的自动轮播事件，在轮播钱，需要等待3000毫秒，再自动向右轮播。
向左箭头已经设置好了，现在设置向右，向左和向右一样设置，设置动态面板【ad_indicator】和动态面板【ad】的状态为为“【Next】”，并勾选“向后循环”。
到此为止，整个轮播效果都已经完成了。
