hugo如何实现轮播图

放弃曾经那些年少轻狂，不去才管所为，流浪或者远方，只想在你身旁吧。

如何使用动态面板制作巴尔伦波图？ 哈哈哈哈哈，一个字，绝。

给大家看一下这个今天要看的这个路啊效果这个是这个一个轮播收放的一个样啊，效果怎么是实现的呢？首先需要用到圆圈的一个轮播图，轮播图是这个方案，大家组建 好，在他中间用到一个啊，这两这两个一个是啊，相当于是我现在当前的第二张的话，他第一张会露出百分之三十，第一张会露出三十 rpx， 第二第三张会露出三十 rpx 的一个 啊内容。然后呢他是还有那个监听事件啊，找到下面这监听当前监听，那当前滑动到哪一个啊轮播图了。然后他的相标拿到之后啊做存到那个 当中，我们通过这个来判断是当前下标我们是否等于我们的那个啊，滑动的道道的那个下标进行判断，如果相等的话，就是就加一个撞名，加一个类名，就是 uctiviv 的一个内容来进行一个收放。

让你做个三 d 照片轮播，你扭扭捏捏说没学过，这不巧了吗？熊二教你 先给音乐点击自动采节拍。二、添加图片开头，将素材移动到右边屏幕外，打上位置关键针 针移动到结尾，再把素材移动到左边屏幕外，移动到前两个节拍点中间位置，将图片拖到屏幕中间，在第二个关键针位置添加图片，在开头打上关键针，移动到右边屏幕外面， 结尾再移动到屏幕中间，然后添加网格素材混合模式，改为正片叠底，再次添加图片素材，再点击抠像，智能抠像，将人物抠出来缩小，移动到下面开头，打上位置大小关键帧，在素材结尾移动到右边， 后面复制一份替换素材，把时长对齐接头处后段时长调整一下，添加泡泡变焦特效，到开头后面添加浪漫分为二特效，最后再添加一个高清画质滤镜，就完成了。

活动图片太多，怎么排都放不下。全选图片，图片格式高度四厘米图片排两列，画面更饱满。选中上一列排列，对其横向分布，再来个垂直居中，下一列重复操作， 分别把它们组合，方便后续操作。挪到一旁备用。画个矩形，填充红色无限条，再插入直线， 实现白色，宽度十磅短。画线类型选择方便，下面复制一个胶卷就完成。选中它们，按住 ctrl 复制一个 图片，拉回来一个画板，左侧对齐，另一个对齐，右侧给他们添加直线动画，上面靠左，下面右拖动红色光标，调整动画路径， 持续时间八秒。打开效果选项，把平滑开始和结束都改为零。最后加入图片和文字图片，至于底层做背景展示。

高对比而又耐看的灯光诀窍是什么呢？今天依然是一组酷狗的灯光揭秘，那我们原篇奉上 观察三个图，第一眼吸引我们就是背景右侧有明显的条形光源，通过观察人物脸部的光笔，我们可以知道主光的方向是偏向后侧逆的方向。想要同时实现柔和的面部与锋利的影子呢？那我们就会选择一个中性光作为主光， 同时观察人物肩部区域的高光。除了主光源外，我们也需要一盏灯来补亮人物的阴影。在灯光的选择方面，背景光的附照用到了条形柔光箱加上一块泡沫板来挡光，通过合理的摆放位置，在画面中塑造明显的条形的光影。 人物的主光源附近，我们会使用到高灯位下扣的一个雷达罩，需要一块漆板来挡住雷达罩下半部分的光，让光主要作用在人的上半身， 并且在另外一侧使用到了一个小的方形来补亮阴影。最后呢，使用标照加上蜂巢微微补亮一部分的发丝逆光。那么这个灯位呢，我们就到此完成，来看一下最后的对比吧。

各位大佬晚上好，那么我今天再去介绍一下我们大屏，今天我也加了一个轮播管理的功能，这个功能，呃实际项目我也很需要， 因为你可能显示屏只有一个，但是你想完整的展示一下你们公司或者平台的能力， 你在不同页面切换的时候还不太好切，手动切、轮工切都不太好弄，有可能还要上大屏的工具印记，那么这个功能它就是为了实现我们多个屏幕的切换，我们先看一看效果， 首先打开了一个是你的一个，第一个大屏在配置的一个时间范围内，他会不断的切，那是我们现在默认是配的十秒钟，他可以配置多个，可以在你允许的范围内去切换， 那么这个效果就会很好，因为在你宣传上面也达到你的想要的效果。我们在编辑页面可以选择我们的一个大屏的模板，你可以勾选选择了八个，那么这八个十秒钟切换一个，那么可能是一分钟多到一分钟左右， 呃，把它切完，可以设置自动轮播切换时间切换的效果，以及一个季度条，控制条一般都不显示的，那么这边可以看到， 你可以把这个链接分享给别人，那么别人就可以直接看到，那么这里是免登录的，那效果也挺好。

首先准备好素材和音频，然后选择一张照片，将时间轴放到最左边，打上一个关键针，将照片拖动到最右边，接着将时间轴放到照片的最最右边， 照片拖到最左边，这样就有一个滑动的效果。然后把时间轴放到两秒左右的位置，然后把第二张图片拖过去，末尾与图片一对齐，剩余的照片依次排列好，然后把第一张图片的属性粘贴到其他素材上。 接着将所有照片复合成新的片段，然后添加一个黑色素材，添加一个圆形蒙版，调整它的位置和大小。 将黑色素材再复制一份，将它拖到下面，然后选择复合片段，调整速度曲线，点击加号，增加一个变速关键帧，接下来就像我这样调整， 然后勾选智能补帧，选择光流法，最后加上贴纸以及星光特效就可以了。

这种多图轮播的动画效果看起来有新意，做起来也非常简单，而且还可以实现无限循环的效果，点个赞马上告诉你！第一步，选中所有图片， ctrl 加 d 复制一份，把它们头尾相连起来。再次选中所有图片，右键组合，把它们变成一个整体。第二步，插入一个椭圆，填充白色 无轮廓，下面也复制一个，加入文字，这样静态版本就做好了。第三步，选中长条图片，给他添加动画选择只限 靠左，我们再缩小画板，向左拖动红色光标，把上下两部分图片完全的重叠，这样无限循环的时候就不会有瑕疵。接着点击动画窗格，双击左边的动画， 把平滑开始和结束都改为零，在计时里开始与上一动画同时，期间十秒重复，直到焕灯片末尾。搞定， 我们一起来看看效果。

这期呢给大家带来轮播图的实现，轮播图就是我们上面展示的这三个图片，它是怎么在我们项目中实现的呢？首先还是看到我们的数据库里面，我们 有个数据库表，数据库表里面有记载着我们这个项目的一个数据库文件。呃，先找到我们的项目， 这个就是啊，这个就是我们的三个图片，比如我们把这个三个图片呢放到我们的配置页面里面，就是配置页面呢，可以记录一些，比如我们官方的 key， 还有这个 安全密钥啊，是吧？都可以记录在我们的配置文件里面，这样更加安全。然后这三个轮播图呢，也可以往这里面记载， 然后怎么看这是不是这三个轮盘头呢？我们可以对它稍微改改字体，比如我们改个其他的名字，多改两个名字啊，这边我再刷新一下， 哎，可以看到这第一张已经没有了，证明我们改的这个确实是这个加载的这个数据库的名字。所以首先我们就是在这个配置文件里面去拿到的， 然后更往上一层去浏览，就根据我们之前画的这个三层的定义图，先是数据库到后端，然后再到前端， 在我们后端呢它也有个配置文件，就在我 config 里面，它会加载和提取我们数据库表里面的数据，就把这个三个路径提取出来，在我们浏览器上也可以看到，就比如我们 我们在项目中打开 就这里这里呢，我们每次加载呢，它会有一个呃查询，就是看看搜索我们 config 的 查询，我们找一下有没有 啊？这里可以看到有一个请求，我们后端 config 的 一个请求，就是这里可以对应上，然后这里面呢还有一个是 config 的 list， 就是 它这个列表，请求它的列表在这呢，我们找下面有没有关于列表的 方法，就是这个前端列表，它通过这个呢去请求去查询啊，然后分页，我们看一下查询出来的结果， 这个它会有个加载，你看请求的时候，我们传递的参数是查一页，然后只限制查三个，在这里也可以看到只查出来这三个数据库的一个 list， 也是就是这三个图片，然后可以看到正好是这三个路径啊，是这样实现的。然后在我们前端的页面呢，我们看这个前端的一个效果， 比如我们搜发展历程这几个字就可以定位到我们这个页面， 这也是我们之前经常找图片找文字的一个方法，就是通过全区搜索， 我这个是在这里面加载的，我们再看看有没有其他一面找定位到这个首页的一个布局， 通过这边呢？因为是没有看出来，我们看我们的配置文件有一个配置 关于我们这个首页的，因为我们是点首页才出现的嘛，所以我们看一下首页是记录的是哪一个页面，在这里在这里我们找到了这个首页，是访问的 page 下面的 index 页面，所以我们在这里去寻找 这个页面，在这里呢是加载的我们的轮播图啊，至于是不是呢？我们可以改稍微改里面的字来试一下，就比如在这里这里我们随便写两个字，然后点保存，看有没有多余出来这几个字， 发现没有，没有的话我们再看看是不是哪里出现问题，比如我们在上面再写两个字，哦，发现是啊，生效了，证明是这个页面没有改错， 点击保存，然后它就消失了。这个 swapper 呢，就是我们记录的一个轮播图的一个样式， 这是前面的是注视，不用管啊。这个 swapper 呢就是一个轮播图的一个效果，就是相当于 html 的 一个组建， 这里通过一个循环呢来调用出来我们后端加载的这三个数据，就是这个三个数据，获取它 date 里面的 list 的 这三个组数据，通过这样来加载出来 这段，这段是我们的关键代码， 然后下面虽然也写了一遍，但是下面这个没有生效 啊，你看这微衣服呢，写的是 false， 它做了一个判断，就是说关于有无登录的这种判断，登录的话就展示不登录，不展示是这种，其实这两个看一个就可以了， 嗯，把不用的折叠一下，就看这一个啊，这里面呢，你看这里面有个循环，就是根据我们的 swap list 啊，做了一个循环，它有三个呢，就是循环出来三个， 从而加载出它这个循环的。嗯，这个路径根据我们基础路径加上这个图片存放路径，这个就是存放存放路径来读出我们的信息，然后图片存放在哪里呢？可以看到我们这个路径上是有一个 fill 的 一个 swapper p h 一 一，它又可以在我们的后端能找到有一个存放它的文件夹。 这里你看 feel 里面有一个 swapper 一 啊，就是 swapper picker 一 啊，这两个，这个啊，我发现它还会多了一个照片，看这三个正好是我们刚才 在这里，在我们这个小程序端呢看到的这三个图片。然后这时候说我们知道大大概的原理之后呢？它不是一个加载吗？循环加载， 我们知道它大概原理之后呢？我们可以通过，比如我们进行一些改动，它这个时候是查询的是三张图片，我们想如果只查两张或者一张，应该怎么修改 这个就关键事件就关于我们这个查询了，就是在这个，它是便利的一个 select list 里面的数据，所以我们通过这个数据呢 对他的编辑来进行他的修改。比如你看他是个轮播莫里斯的这是这是定义，定义了一个这样的数值， 在下面呢，他会有一个轮播图的查询，就在这里还有个循环，循环是往里面放数据，然后通过这个来放，但是他这边你看查询了一页，然后是限制三个， 所以我们能不能在这里面进行修改。比如我们查询四个或查询两个，我们修先修改两个吧。首先少一个，我们点保存，点击保存之后，我们看前端效果，只查出来两个，这样就是实现了两个轮播图，如果是一个呢，也可以在这里修改， 比如我们只想查一个二点保存，这不就一个轮播图了，就没有这种，没有这个滚动的效果了，只有这种拖动效果。 哦，还有的同学呢，他就是不想要这个轮播图，是吧？不想要的轮播图呢？我直接把这个这条代码注视掉，嗯，可以删掉点保存，删多了，删多了我再再删一些，然后我们看看，你看这样轮播图就消失了，这样就没有轮播图了， 就是需要修改呢，就找到我们的关键路径，而如果想实现轮播图呢，就这样粘贴就行了。它就是一个前端样式，加载了一个这个 select 组件，它在这里面定义了它一个长宽高、长度和背景颜色，还有这高度。 这个 v4 呢，就是一个循环，通过这个加载出来数据，这是一些固定的写法， 要定义一些 key 啊，这个 key 的 index 就是 它的，比如它是第几个是吧？第一共三个嘛？它是第二个，第一个、第三个啊，这样来 定义的，然后说如果要是有四个呢？怎么办？因为目前我们只有这三个数据嘛，所以要需要有四个的话，我们比如我们把这儿再插入一条数据在数据库里面，也可以在后台管理里面去新增一条， 就是我们那个轮播图管理在这里，这里有个轮播图管理在这里呢，也可以去新增啊，比如你看目前就是四条，四条的话，但是因为在这里我们只查了三条， 哎，不对，四条是因为刚才我填的一个这个四条，大家可以在这里面自己去修改，比如再往里面添加一条， 需要这个新增权限呢，我们后续给大家讲这个菜单管理的时候，给大家告诉大家怎么去增加这个权限，然后以及我们去修改。目前是没有新增的，所以只能从数据库里新增，点击刷新，然后这边呢 我们根据这个 list 的 值来给它新增，就这时候我们是传四个，我们点保存，这里面就每次就加加载四个啊，可以看到这是四个，但是它好像多出来东西了，我们修改一下， 还有我们复制两遍，现在是两个， 我们再加载四个，点击保存好，可以看到现在是四个图片，这就是一二三四，就四个了，这就是关于我们轮播图的一个定义。然后它的后端呢，就是我们的 config， 就是 我们加载配置文件 啊，当然不是，这个 config 是 ctrl 这里面的这个 config 这个，然后它在 service 层呢，也是同样的一个路径，是这个，这里它通过这样相互调用呢，实现了后端的写法，然后如果它通过这个前端呢，就是往在这里放的 就是两个这个 shell 这个组建来实现了前端的这个写法。在后端呢就是数据库表里呢，就是我们写的这个 config 数据库表， 如果他不需要啊，就可以把这个删掉，这几个这几段点击右键，这不有删除记录，删掉就可以，需要的话呢就可以在这个上面进行修改啊，如果想对它具体调样式，就调节这个样式，比如我们这个光度可调成三百， 这样，亮度就是三百，当然他这个图片也得需要传对应像素的， 目前是传的这个像素，这个是传了三百之后呢，对应的也需要改成三百，三百，然后我们会有一个拉伸效果，我们点击保存啊，看到这样是变宽了，这效果就跟这个更改了，就是一个前端效样式的一个修改， 这边还是把它撤销，点击保存，这边就用四个吧，毕竟已经加上了。然后面如果大家需要的话， 后边在讲菜单管理这一项的时候，能给大家告诉大家如何去给这个做新增，就是目前他只有删除和修改，没有新增，所以在后面呢给大家教给大家如何去在这个基础上做新增操作。