在本章中，你将学会使用动态面板和交互动作，实现一个Banner轮播图示例。
项目背景
在目前市场上大部分的App首页中，常常会出现Banner轮播图的身影，它常常作为推广活动的一个展示入口，清晰表达活动主题并吸引用户点击。
Banner轮播图设计的好坏，很大程度决定了能否精准地将设计者的目的传达给用户。
那么本章中，我们就来使用动态面板和交互动作实现一个Banner轮播图示例。
项目搭建
首先，创建一个新项目，命名为Banner。
页面框架
首先，为了展示的效果，我们还是加上手机壳作为展示的框架。
页面样式-顶部导航栏
拖入一个“矩形1”组件，命名为“顶部导航栏”。
双击修改内部的文字为“首页”，将它的位置放在手机壳框架顶部位置，设置它的尺寸为375*40。
设置字体字号为14，字体颜色为#333333，矩形填充颜色为#FFFFFF，线段线宽为0。
以上，我们就完成了顶部导航栏的创建。
页面样式-轮播图
接下来，我们来完成轮播图的样式。
和之前的章节构建GuidePage引导页类似，Banner轮播图也是由几个页面进行循环切换而形成的效果。
拖入一个“动态面板”组件，命名为“轮播图”。
双击进入内页，新建4个状态，分别命名为1、2、3、4。
设置轮播图动态面板的位置在顶部导航栏下紧挨着，设置尺寸为375*211。
我们在轮播图动态面板的每个状态页面中放入一张图片，作为轮博图展示的内容。
交互动作-轮播图轮播
下面我们来完成下轮播图的交互，我们希望在页面打开的时候，轮播图“稍等一会儿”，等用户反应过来，然后开始滚动。
在“交互”工具栏中新建交互，选择“载入时”，选择“等待”，设置等待时长为“2000ms”。
再在载入时交互下新建动作，选择“设置面板状态”，目标为“轮播图”动态面板，状态选择“下一项”，勾选向后循环。
进入动画设置“向左滑动+500ms”，退出动画设置“向左滑动+500ms”。
这样，我们就完成了轮播图的自动轮博效果。
交互动作-轮播图拖动
下面，我们再加入一个交互动作，当我们在拖动图片时，比如向左拖动，轮播图到上一页，向右拖动，轮播图到下一页。
这个交互动作会有一个思维难点，我们的手指拖动轮播图的卡片，向左拖动，其实我们是把当前的拖走，查看“下一张”的内容，而且卡片移走的效果是“向左滑动”。
很多时候，我们是需要看右边的下一张的图片，但设计交互动作时需要和我们物理逻辑相反的动作，这点要注意了。
我们添加了2个交互动作，一个是“向左拖动结束时”，选择“设置面板状态”，目标为“轮播图”动态面板，状态为“下一项”，勾选“向后循环”，设置动画为“向左滑动+500ms”。
另一个是“向右拖动结束时”，选择“设置面板状态”，目标为“轮播图”动态面板，状态为“上一项”，勾选“向前循环”，设置动画为“向右滑动+500ms”。
以上，我们就实现了轮播图的自动轮博和拖动切换效果，我们可以在浏览器中预览下效果。
逻辑优化-轮播图轮播
我们在浏览器中预览时发现一个问题。
由于我们使用的是“拖动结束时”的交互，那么我们拖动结束后，系统会不断执行这个动作，无法停止。
也就导致了，如果我们向右拖动，轮播图切换到上一张后，轮播图滚动切换的效果变成了反过来轮播了，这不是我们想要的效果。
这里我们做一个逻辑优化，当我们向右拖动结束时，会展示上一张图片，但此时轮播需要停止，并继续原来的滚动交互。
在“交互”工具栏中，在“向右拖动结束时”的交互下新建交互动作，首先选择“设置面板状态”，目标为“轮播图”，设置为“停止循环”。在新建交互动作，选择“等待”，设置5000ms，再新建交互动作，选择“设置面板状态”，目标为“轮播图”动态面板，状态选择“下一项”，勾选向后循环。进入动画设置“向左滑动+500ms”，退出动画设置“向左滑动+500ms”。
我们再在浏览器中预览效果，发现问题已经解决了！
页面样式-切换按钮
下一步，我们关闭动态面板，来到框架外面。
拖入两个方向图标（图标可以在网上进行下载），命名为“上一页、下一页”。
调整图标大小为18*18，位于Banner轮播图动态面板上面，距离两侧的间距分别为15，上下居中。
交互动作-按钮切换
上一页和下一页的交互动作和拖动的动作相同，当我们点击上一页时，轮播图页面切换到上一张，点击下一页时，轮播图切换到下一张。
选中“上一页”按钮，我们在“交互”工具栏中新建交互，选择“单击时”，“选择“设置面板状态”，目标为“轮播图”动态面板，状态为“上一项”，勾选“向前循环”，设置动画为“向右滑动+500ms”。
同样，这里的逻辑也要优化，我们继续在下面新建交互动作，首先选择“设置面板状态”，目标为“轮播图”，设置为“停止循环”。在新建交互动作，选择“等待”，设置5000ms，再新建交互动作，选择“设置面板状态”，目标为“轮播图”动态面板，状态选择“下一项”，勾选向后循环。进入动画设置“向左滑动+500ms”，退出动画设置“向左滑动+500ms”。
另外，我们完成下一页的交互效果，选中“下一页”按钮，新建交互，选择“单击时”，“选择“设置面板状态”，目标为“轮播图”动态面板，状态为“下一项”，勾选“向后循环”，设置动画为“向左滑动+500ms”。
我们在浏览器中预览下效果。
页面样式-页码圆点
我们继续完成样式部分。
拖入一个“圆形”组件，命名为“圆点-1”。
设置尺寸为8*8，位置距离轮播图下边距为20，填充颜色为#CCCCCC。我们再复制3个，命名为“圆点-2”、“圆点-3”、“圆点-4”。
交互动作-页码圆点
在“交互”工作栏中，给每一个页面圆点都设置一个“单击时”的交互动作，选择“设置选中”，设置为“真”。
在交互样式中，设置“元件选中的样式”，勾选“填充颜色”，设置为#FFFFFF。
并在“选项组”中，给4个页码圆点设置同一个选项组，命名为“页码按钮”。
以上，我们完成了页码圆点的点击切换。
交互动作-联动交互
接下来，我们需要将轮播图和页码圆点联动起来。
这里要实现2个交互动作，一是在轮播图进行轮播时，页码圆点相对应的要选中对应的圆点。第二个交互是当我们点击页码圆点时，轮播图也要对应切换。
首先我们先完成第一个联动交互。
我们选中轮播图动态面板，设置一个“状态改变时”的交互，用来监控当前面板到底展示哪一个状态页面，然后再根据当前面板处于哪一个页面状态，设置页码圆点相对应选中哪一个。
同理，我们在点击页码圆点时，也是为每个页码圆点设置点击时的交互动作。
我们在点击时的交互动作下，新增了2个动作，一个是设置面板状态，当我们点击哪一个页码圆点，对应面板就展示哪一个，然后是逻辑优化的部分，防止轮播图反方向循环滚动，之前也说过了。
完成后，我们在浏览器中预览下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
Banner轮播图： ricardowesley.gitee.io/banner
快来动手试试吧！
