希音轮播图只有一张的前端怎么显示

在你的前端职业生涯里边啊，有一个东西他会始终陪伴着你，就是这个轮播图的，你入门的时候做过很多年，很多年之后呢，你还会做，因为轮播图他玩的花样比较多啊，像这个地方呢，有一个还是算比较常见的轮播图效果啊，那么这个效果该如何来实现呢？其实无论什么样的轮播图，他的实现思路呢，都是完全一样的， 聊聊这个轮播图吧，代码结构上呢，跟普通轮播图还是一样，就是所有需要轮播的元素，就是那个图片，你再拿到 carlosill item 啊，我这里设置的是这个的样式，就是那些一张张的图片，然后呢把它保存到一个变量里边，这是你一定要做的。第二个呢是你一定得有个变量来指代当前的轮播图啊，当前显示的是第几张轮播图？ 然后呢你一定得有一个函数，这个函数的作用呢是来完成布局，就是他会根据你这里的变量的值，比方说你当前显示的是第一张，那么他就会按照显示第一张的方式，把每一张轮播图的位置啊，信息 啊，那些玩意全部给他收拾好，只是不同的轮播方式呢，那么这个函数的实现不一样而已，这个代码写成这个结构呢，你就成功了百分之五十了，剩下的事情就是调用这个函数啊，一开始呢布局一次，对吧？然后呢点击前面那个按钮呢，在 改动这个 index 的值，再布局一次，点后边这个按钮呢，改动一个 index 的值，再布局一次，那么这个单把结构就可以把写完了，你看，比方说拿到前面这个按钮，然后呢再拿到后边这个按钮，然后呢，前面这个按钮呢？给他注册点击事件啊，点击的时候干嘛呢？ index 剪剪对吧？到上一张吗？然后小于零的时候呢？把设为零，然后调用这个 lay out， 点下一个按钮的时候呢？ youtuber 注册点击事件啊，应该是加加，对吧？不能超过最大，所以然后调动这个内奥，那如果说点轮播图本身呢？就点某一张图片的时候，他要翻到那张轮播图，是吧？那么代码也好写，我不是拿到所有的轮播图吗？来个循环啊，拿到那个循环的元素和那个下标 i， 然后呢，给每一个元素注册点击事件，点击过后呢，把 这个 i 复制给这个 index， 然后重新调整 loves。 所以呢，后边的代码没有任何的难度啊，这个结构瞬间就可以出来，你只需要完成这个类 out 函数就可以了，告诉你当前是第几张。然后呢，你把布局布局好，那么目前呢，我们的页面上，你首先要把这些所有的图片集中在 整个区域的中间啊，这是我们的区域，然后呢，你要把这个图片集中在中间，那么如何让他布局成这个样子呢？啊？怎么来布局呢？那就针对每一张图片做一些变换就可以了。比方说吧，我们随便找一张图片啊，找到这个区域里边的某一张图片，你看全是图片嘛， 随便找一个吧，比方说找最后一个来试一试吧，那么我要把它分散，那我肯定得平移啊，所以说有个圈是缝，圈是妹子 x， 那平移多少呢？我就不知道了，以后要算反正得平移吗？那比方说我平移个负的两百个像素啊，你看不就平移了吗？对吧？然后呢，我再让他缩小一点呗。 kill， 比方说零点八，那缩小一点，然后呢，我再让它旋转一下呗。 rotate y， 对吧？进行旋转，然后旋转到四十五度吧。好，然后呢，你还要去控制 试一下 zindex， 它有个覆盖关系吗？然后呢，你再给它加上一个，比方说透明度吧，零点五，是不是就有这么个意思了？你去依次搞定每一张图片的全是 form， opacity， 还有那个 zindex， 那么这件事就完事了。 所以呢，这个雷奥的函数啊，他要做的事情其实很简单，就是便利所有的元素，然后拿到每一个元素，然后依次设置该元素的什么 transform， 还有什么 opacity， 还有什么 zindex， 对吧？依次去设置就完事了。那么在 transform 里边呢，要依次去设置它的什么 translate， x 以及 scale 以及 rotate， 这就是你的目标，你做一件事，你只要把目标明确了，后边的实现都不是什么大问题，怕就怕什么呢？下不了手，没有目标，写着写着都不知道自己在写啥。那叫依次搞定啊，一个一个来搞定，首先是这个 x 的偏移量，那么我们可以看到啊，在最终的效果里边，他们是依次偏移的，是吧，也就意味着啥呢？意味着每一张图片啊，他们之间都有一个固定的偏移量， 比方说这张图跟这张图，他们之间有一个固定的偏移量，然后呢，这张图跟这个这张图也有个固定的偏移量啊，可能呢，这两张图片的偏移量呢，要大一点啊，后边都是固定的，所以呢，你需要定一个变量来表示 x 方向上的偏移量，就是每两张图片之间他要偏移多少，你自己看着来吧，比方说一百个像素啊， 或者这样来定一遍的好一点啊， x office， step 就是每一步的便宜量，两张图片之间的，你搞不清楚的话，你打出。是啊，每个轮木图之间的间隔。那么这里呢，我就要去通过这个东西呢，来算出它的 transit x 应该是多少，也就是我要算一个值，叫做 x office， 它的值应该等于多少？那等于多少呢？那就要看你现在这张图距离我们正在显示的那张图它相隔了多少。 相隔了一个身位，那就是他乘以一。相隔了两个身位，那就是他乘以二，是这个道理吧。那我怎么来知道还相隔了多少呢？那就是相减呗。哎，减去你这个是不管了吗？那有朋友说减出来有可能是负数啊，那负数就负数呗，负数更好。那负数说明啥？说明我们现在要 设置的这张图片，他在我显示这张图片之前，那减出来是负数，是不是就应该是他的偏移？应该是往左边偏移，他的偏移也应该是负数，对吧？带符号更好，我还省心呢，我还不用去写意图判断呢，多好啊， 相隔了多少我就乘一个多少呗。那这样不就算出来了这个 x office 吗？那算出来过后呢，我们是不是就可以设置了 it 全是 thone， 应该为啥？应该为全是 next x 多少个像素？就是这个 x office 的像素保存你看一下。哎，目前呢，显示的是第一张文波图是吧？那么我现在呢，让它显示第四张吧，保存你看一下，哎，这个偏移是不是就出来了？当然这个 zenex 呢，还有一些问题啊， 如果说你觉得不好看，那我就去先搞定这个 zenex， 反正方向明确了，你怎么写都是对的。你看，像这些问题，根本就不需要什么框架的知识，也不需要什么第三方库，就是最原始最普通的借时代嘛，在我们这个行业里边，什么叫做顶尖高手，他不是说你学会了多少框架，多少第三方库复制粘贴玩的有多溜，而是你是否能用简单的代码 来解决复杂的问题。对于高手而言，框架和库可以为其所用，但是呢，不受其所限。其实说的这么悬，归根结底就是开发思维，要培养开发思维，那么你就好好来看一看我们的大师课，这课程呢，是完全免费的啊，来领取就完事了。在大师课里边，我会通过一些效果的实战案例来告诉你一般性的开发思维 遇到一个复杂问题的时候，我要用什么样的切入点去解决这个问题，那就不是像短视频，几分钟的视频能搞的定的了啊，那就需要长篇大论了。当然，大师课里面还不仅仅是解决开发思维的问题， 还包括前端最重要最核心也是最值钱的知识。从浏览器的渲染原理，到 view 的原码和优化，还包含各种各样的笔面试题， 整个一条线串下来，你花一周的时间认认真真的把它学完，学完之后，你就能真切的感受到那些三四十万年薪的人，天天研究的是什么玩意啊？这大师课呢，目前还可以免费领取啊，怎么领？就咱们评论区第一条，然后呢，加入我们的粉丝群，根据提示领取就完事了，好收回来啊，好偏移呢，我 搞定的，但是呢，这个 z index 呢？造成这个呵，图片呢，不是很好看啊，那我调一下这个 zindex， 这个玩意呢，也很好调，其实在最前面呢，当然是这个 index 所指向的图片在最前面，反之离这个 index 越远呢，它的 z index 就 反而越低，对吧？所以呢，这一块一定有一个代码，就是求 index 减 i 的绝对值，这个值越大，你的 z index 就越小，所以呢，前面一定是加了一个负号， 因为只有某个东西在剪它，那么它的值越大，那么整个表达式的值呢，就越小。那用什么东西去剪呢？你看你用什么东西去剪，你用一个一百去剪也可以，你用一个一万去剪也可以。然后呢，你要写的稍微合理一点的话，你就用图片的数量去剪个定一个变量来，至于图片的数量啊，因此呢，这一块 z index 怎么算呢？就这样算的，用这个什么 cod 去剪它，然后把这个 index 设置进去啊， item style， z index 保存，你看一下好，这个 zindex 是不是搞定的好。然后呢，就是依次来呗，这个说方又怎么说方呢？哎，其实你观察这边的话，他是这么一个递进式的 说法，就啥呢？就这个图片呢，是这个图片的多少倍啊？比方说零点六倍，然后呢，下一张图片呢，又是他的零点六倍啊，你去减去个固定的值也可以，你去按这个比例来说放，也可以，无所谓啊，你看你自己喜欢哪种效果，那都不是很重要了，那都是实现上的细节。 比方说我就按比例来说放吧，后一张图片是前一张的零点六倍，那么我就要去定一个变量啊，来表示这个说放啊， scale state， 零点六说放的地界， 那你可以想象啊，我怎么来算出这个缩放倍率呢？怎么来算？你就这样想呗，如果说我那个图片就是当前最前面那个图片，那我还缩放吗？就不缩放，那么缩放倍率呢？就是一， 相当于啥呢？ i 减 index 等于零的情况下，那么缩放倍率呢？就是一。好，当然呢，要求一个绝对值啊，好，如果说这两个人相减呢，得到的绝对值呢？是一，就表示间隔了一个神位，是吧？那么缩放倍率是多少？他就是零点八吗？相对于最前面那个图片，哎，有一个零点八的缩放，哎，好像是零点六，是吧？错了。 好，那如果说间隔了两个声位呢，那就是先来个零点六，再乘一个零点六。如果说间隔了三个声位呢，那就是在一个零点六的基础上，再一个零点六，再一个零点六，你琢磨这个道理吧，那是啥呀？那不就是零点六乘以多少次方，对吧？多少次方呢？就是这个次方，所以呢，这个 scale 怎么算？就是 scale step， 你呢？ 我拍的时候他在提示你了，就是你只要有了方向过后，你把结构一定下来，可以借助 ai 工具极大的提升生产效率。像以后我们做开发啊，那种具体的实现那些乱七八糟的细节会显得越来越不重要了， 重要的是你要给他定方向，他是给你定不了方向的啊。好，那么这个缩放被滤译出来了过后，那么这个圈错是不是又可以接着往后写了啊？写上一个 scale， scale 多少呢？来自于的变量啊， 好，保存，我们试一下啊，这个缩放是不是出来了？好，这个缩放出来过后呢，你会发现就是这张图片啊，他离我们第一张图片呢，还是太近的，所以说我们针对离他最近的这个图片呢，给他加一个基础的偏移值吧。啊，这一块也很好搞， 稍微调整一下，就是设置一下这个偏移量啊，先把它设为个变量，如果说 i 不等于 index， 就表示目前你跟我们这个要显示图片呢，是有段距离的，那么在这个距离基础上呢，我再加上一个初始值啊，就是有一个固定的距离，比方说一百个像素，你只 看得来吧，大家注意啊，这里肯定不能直接用加，为啥呢？因为你往左边跑的话是减，对吧？那到底是加还是减呢？那就取决于这个相减的符号，这个相减的符号是负数，那就是减，这相减的符号是正数，那就是加，能理解这个意思吧。所以呢，这一块到底是加还是减，那么 要需要用一百去乘以这个符号，那么这个符号哪来呢？这个符号呢，我们可以利用这个 max 里边的一个工具函数啊，叫做 sideit index， 那么他就可以得到一个一，或者是负一，他为负数就是负一，他为一，正数呢，就是一啊， 得到一个变量啊三，因此呢，我们这里去乘以这个三，那么这样子呢，就给这个偏移量啊，加了一个基础的值，这样子呢，一偏移，所以舒服多了哦，偏移出来了，那么接下来还有啥呢？还有个旋转是吧，揉腿走歪。那么这个旋转呢，你 你也可以把它搞成变动的，也可以把它变成固定的，看你自己啊，我们来设置一下，把它旋转 rotates y。 好，我们首先把它设置为四十五度啊，然后在这里呢去使用旋转 rotates y， 然后 degree 单位加上啊，保存，你看一下，这所有的都旋转了，那么这个玩意呢，就不太合适了啊。首先中间那个肯定不能旋转，因此呢，我这里要排出掉一种情况啊，如果说啊 i 等于 index 就是目前正在显示的，那肯定不旋转了啊，旋转为零，否则的话四十五度，保存看一下呢。哎，中间的没旋转了，但其他的地方呢，旋转的方向呢，是有问题的，因为你看右边的图片啊，他旋转方向呢，应该是负数啊，负的四十五度， 左边都是没问题的，所以呢，你这一块呢，也可以再写个三步运算，或者你写一步判断都无所谓啊。那么其实这一块呢，你不用那么纠结啊，你直接把这个四十五呢去乘以这个符号不就完事了吗？这个符号不就可以区分左边还是右边吗？对吧，咱们去乘以这个三，不过呢，左边呢，他是负数，但是呢，左边呢，我这一块要用正数，他就乘一个负三吗？不也搞定的吗？保存你看一下，给这个旋转数也搞定的，那么就差一个什么透明度，透明度 怎么算呢？你也可以像我们刚才那个设置说方一样啊，给他来一个倍率吧，叫做 opacity state 为零点五吧，就是后一张呢，相当于是前一张的透明度基础上再乘一个零点五。那么他的计算方式呢？跟那个 scale 是完全一样的啊， opacity 等于什么呢？等于这个，然后呢？把它设置进去， 你看一下，对吧？透明度也解决了，那就没了呀，因为你这个函数一写完，你后边这些事件全在掉这个函数，对吧？只要这个 index 直一改，然后一掉这个函数，他就会重新布局，你看吧，比方说我们点向前向前，是不是把这个 index 直剪了，剪了过后 重新布局，那你看吧，出来了呀，点后边那个，他把那个 index 加加，然后呢？重新布局，一重新布局，他就会给你布局成你希望的样子，然后点具体的图片呢，他也会重新布局，对吧？所以说核心函数就是个料子，你把它写完了就全部出来了啊。代码结构一旦出来，方向一旦定下来，后续的实现都不是什么问题，关键就是方向定不出来，那就恼火了。

五分钟教会你这样子的，当鼠标悬停在某一张图片上面，就有了放大效果，那这个网页轮播图呢，跟我们之前学过不大一样，它主要体现的一个效果就是当我鼠标悬停在某一张图片上面， 那张图片呢，就会有一种放大的效果。那这样子的动画呢，比较适合在各位同学，如果你在某一页幻灯片上有多张图片需要进行展示的时候，那这样的效果呢，就会非常的形象且生动的，能帮你凸显每一张图片的细节。那我们看一下这样子的一个动画，我们应该如何进行制作呢？ 首先呢，我们先创建一页新的幻灯片啊，那这里呢，这个底色是我自己配的，大家可以根据自己实际的一个使用啊，进行配置就可以了。按照我们上一个视频讲过的内容，我们先插入插入一个文本框啊，我们 先来限定一下咱们图片的一个大小。好，那我们点击上面的绘图工具，然后把这个大小我这里改成五厘米啊，大家可以根据自己的排版需要进行修改就可以了。 好，那改完之后呢，这地方不要把图片直接插入进来，而是要点击右侧的这一个对象属性的侧边栏，在这里呢，我们找到图片或纹理来进行填充啊，然后呢，我们在图片填充这里去选择我们要的图片啊，然后把它放进来 a， 这样就可以了。好，完了，我们先把它挪到我们需要的一个位置啊，好，我们先放这里，然后我们复制五份啊， ctrl 加 c， 加位，加位加位加位。 ok， 我们先挪插一下。好，这一张一张放整会。好，对齐一些啊，好，第二张， 好，第三张，好，第四张，第五张， 好，此时呢，我们适当的减小一下他们之间这个距离啊，我们稍微缩小一点，好，然后呢，我们点击中间这张图片，我们点击上方出现的绘图工具，我们把它对齐啊，水平居中，垂直居中， 好，然后呢，我们选中五张图片，然后呢，我们还是一样点击一下，呃，这个绘图工具，然后对齐，我们让它垂直居中，好，然后再来一个横向分布 啊，好，此时呢，这五张图片的间距就固定了，然后我们挪一下中间这张图片到中间位置，好，这样就可以了，好，那接下来 我们就把这五张图片依次的放进来，我们点击一下这个框啊，然后点击图片或纹理填充，点击填充这里找到图片填充下拉，我们找到本地文件，然后找到第二张， 好了，这里呢是第三张，好，然后这里呢是第四张，好，然后这里呢是第五张， 好，这样子五张图片就放好了，然后呢，我们复制一下， ctrl 加 c， ctrl 加 v， 复制这一张幻灯片啊，然后呢，我们把其中的一张把它放大一些，好，我们点把它的高度和宽度把它拉大。 好，然后呢我们把它放在居中啊，好，这样子就好了，然后呢，我们把上面这张还没有调整挪下来啊， 就我们以这一张图片进行作为参考啊，这一页幻灯片进行参考，那我们来调整下面这一页，这个呢就是第二张要放大，好，那我们把它的框改成七 骑桥尾车好了，把，这张图片呢，我们得点击一个垂直居中， 好，然后再把这张图片挪过来，好，直到出现屏幕当中的一个横向的左右箭头的橙色标志，就证明已经对齐了。好，那我们继续加 we。 好，接下来呢是我们的第三张啊，然后我们把这一张图片， 然后呢把它垂直居中，好，然后呢把这张图片然后缝改小一点， 好，然后呢也是把它垂直居中，好，那么挪过来， 好，我们点一下这张图片，把它改大， 好，然后垂直居中，然后把这张图片把它改小 好，然后也是垂直之中，然后把横向拖一下，此时呢你再按住键盘上 shift 键，这样他就能在一条水平线上进行拖动。啊，好，接下来是我们的最后一张啊，我们把这里给他改小一些。 很多同学会说我们的视频讲的很细啊，因为我们有很多小伙伴可能基础比较差一些，所以呢我们就讲的稍微细一些，方便各位同学进行学习啊。好，那我把这张图片呢改大一些，好，垂直居中， 好，那把这张图片按住 shift 键，把它拖过来，好，这样子就好了。好，此时呢，我们把它捂着状态了，幻灯片抖音做好了， 然后接下来呢就进入我们核心的一个步骤。啊，好，那现在我们要实现的一个效果就是，当我们鼠标假设悬浮在第一张图片上面，那么我是不是要让它自动能够跳转 到这样子的一个状态，对不对？好，那所以接下来就很简单了，我们只需要把这几张图片创建超链接就可以了，只不过我们这里用到超链接呢，它是通过一个动作设置来进行完成的，我们来看一下，首先第一步呢，我们点击这张小的右键，点击动作设置 在这里呢，我们选择鼠标移过啊，然后呢在这里点击抄链接，然后把链接到他的那张对应的状态的幻灯片，这个状态就是咱们第十八张，对不对？好，我们选择第十八点确定 好，然后呢同样的操作，把这每一张换的片里的每一个图片都拿进行一个超链接啊，好，我们试一下，这一个呢是第十七啊，好，然后这一个呢是第十六 好，这个是第十六好，这个呢是第十五好，第十五 好，那我们重复上面的步骤，把每一页幻灯 panda 进行设置就可以了啊， 好，此时呢，我们就把这五张幻灯片都设置好了，然后呢我们放映一下，然后你会发现你把鼠标悬浮在每一张图片上面，他都能实现一个超链接啊，我们再马上试一下，好，没问题啊，这就好了， 好，他其实实现的原理就是当我鼠标悬浮在某一张图片上面，然后呢我就设置了一个鼠标移过的移的动画效 效果，然后他就跳转到对应的幻灯片，也就是我们所理解的跳转到他对应的这一个状态的幻灯片上面，他进行显示，然后呢由于他动作比较快，所以带给我们人眼的一个感受，就有点像他动起来了，自动放大的一个效果啊，然后我们来 总结一下咱们这期视频讲到的技巧，首先第一步呢，我们需要插入对应的图片，然后按照你自己的一个需求去设置图片的一个大小，然后第三个呢，你可以设置一个平滑切换的方式，这样子呢，会有一个动态的效果更好一些，但如果你觉得他太卡了，你就 不需要加任何的切换啊，也是没有问题的。然后第四步呢，就设置每一张图片，鼠标悬停，然后跳转到超链接的一个设置啊。然后这设置过程呢，可能比较繁琐一些，但是做完之后的效果是非常好的啊。好，那以上呢，就是这期视频的全部内容了，非常感谢各位同学 收看。我是大头，如果觉得我视频还不错，一定要帮忙一键三连支持一下，然后转给你身边需要的小伙伴哦。好，那我们就下个视频，再见喽。拜拜。

大家好，这个视频来做一个轮播图的家人们，来看一下完成之后的效果。当我把鼠标从图片的左边移进去呢，哎，下一张图片他会从左向右滑进来，如果把鼠标从下边移进来， 哎，下一张图片呢，他就会从下往上滑进来。同理，当鼠标从右边进来呢，下一张图片他就会从右向左滑进来，还有从上边进来。 看起来呢，好像还挺简单的，但其实比我们之前做的一些无缝滚动的轮播效果啊，这个呢，还稍微有难度一点，主要呢，看大家的思路，怎么出来方法呢？不止一种。 这里呢，给大家分享一下我自己的思路啊。先来说一下大部分人可以想到的可能呢，就是把图片这个区域再给他分成四个小区域，或者四个遮罩层出来， 当鼠标分别经过一二三四几个区域的时候，再让图片从不同方向进来，对吧？但是这样呢，会有一个问题，就是如果鼠标他从四个角落进来啊，比方说从左上角这个地方进来， 那从这里进来，他算是上面的还是算是左边的呢？同理，右上的这个角还有下边两个角呢，情况是一样的，所以这样来分这几个区域呢，他不够严谨，我要做到的就是经过左边进来，无论是不是从角落进来哈， 他都是左边的图片呢，向右滑进来，从上面进来也一样啊，哪怕呢，我现在是从角落这个地方进来的，还有从右边进来，还有从下边进来，都一样。但是这样来分这四个区域呢，他角落部分会存在公共的这个公摊，面积越大，矛盾呢 可能就越大，对吧，所以呢是不行的，我们就可以换下思路，把这四个区域给它分成四个梯形，也就是呢，这样是不是就可以解决了？但是这里我们单纯靠 c s、 s 要画出几个梯形出来呢，它不好操作哈，这里呢，我们就可以用 s v g 来看一下代码。 htm 结构呢，还是非常简单的四个 mg 图片呢，就是我们轮播的四个图片啊，我先给他注视掉，先给大家看一下我们用 svg 画出来的四个区域， 这里呢，我们要画的四个梯形呢，他就是多边形来的。这里呢，我们可以给他用四个玻璃梗来画这几个区域出来。 pose 里面呢就是围成这个四边形，他四个点的坐标。这个呢都非常简单，现在给他们填充的呢是透明，给他换一个具体的颜色来看一下。 ok， 这四个区域呢，出来了，然后就是这些图片我们要怎么样对它进行布局呢？也很简单，我们就让其中一张照片呢显示出来，其他三张就通过定位控制它在区域的外面， 也就是呢，这样再做一个溢出隐藏。哎，我们看到的呢，就只有中间显示的这张照片了，这是个区域填充的颜色呢，我们还是给他改回透明哈，这里呢，不需要有颜色的。 来简单看一下现在的样式哈。四个 image 图片呢，我给他添加了四个 class， 来看一下这几个 class 写了什么样式，很简单，就是通过 top left 值来控制图片的位置，哪一张图片应 该显示出来呢？就让这个图片应用 i m g 这一个 class， 其他照片呢，就应用上面这些样式给他定位在区域的外面，三百和四百八呢，其实就是我们这一个照片这个区域的大小哈，所以呢，定位就刚好是把它定在这个区域的边缘， 看一下上面的样式，这个图片区域的大小呢，就是四百八乘以三百，并且呢设置了一个相对定位哈，等一下这些图片就是相对他来进行定位的，并且把这些图片的层级呢给他设置低一点， 要不然呢，他会把 svg 画的这几个区域呢给他覆盖住了，那就不行了，来看一下现在的布局，现在呢就是一张图片显示在这个区域里面，其他三张就定位在这个区域的边缘，给他设置一个 溢出隐藏，我们就显示中间这一张就可以了。布局呢是不好了，没什么特别啊，非常简单。难点是怎么样对他进行图片的切换呢？看起来呢，不难，但是要把这个轮播功能做好，并且尽量简单一点呢，还真要有点技巧。 这里呢，我们来写一下 gs， 这里我已经把用 s b g 画的这几个区域和这些图片呢给他获取到了。首先呢，我要通过 for h 来便利一下这几个区域， 便利他们干嘛？是不是要对他们进行鼠标移进去的事件监听，监听到鼠标移进去又怎么样呢？是不是把对应的图片给他显示出来，因为这里呢，我们刚好是有四个区域的，也就是那四个 polygo， 然后图片呢， i m g 他也是有四个的，所以呢，这个 index 他们都是零一二三可以对应起来的，所以当鼠标移到区域里面呢，我们就让 p i c 里面对应了，这个图片呢，给他显示出来，那又怎么样把这张图片显示在区域里面呢？刚才说过了， 给它切换一下 class， 对吧？应用一下 mg 这个类的样式，因为这个样式它控制的就是 top left 为零，这样呢，这个图片就可以显示出来了。先来看一下，把鼠标移进来， 哎，图片呢，他确实切换了，只不过呢，现在他是瞬间切换的，对吧？没有过度的效果。这里呢，等一下再来处理，再把鼠标从其他方向移进去，哎， 不行啊，我们再刷新来试一下，瞬间切换了，上面下来呢，不行，左边没有问题啊， 为什么有的图片可以显示出来，有的不行呢？这是因为这四张图片呢，他们重叠起来的话，他们是有层级关系的， 层级高的呢，他可以显示出来，层级低呢，他就被覆盖住了，看不到了。所以呢，我们还要解决一下层级的问题。这里先来声明一个变量初始值呢，为负的九九八。鼠标移到区域里面呢，就让他自称一，再修改一下对应图片他的层级， 这样每张图片呢，他都会比前面这张图片他的层级大一了，对吧？这样呢，他就不会被前面的图片覆盖住了。 来看一下，把鼠标呢从左边移进去，哎，左边这张图片呢出来了，上边右边下边没有问题啊，每张图片呢，都可以切换出来了，但是现在呢， 他是瞬间切换的，他没有过度的效果，对吧？这个呢，也很简单，我们对 i m g 这个 class 给他添加上一个全吸损过度零点五秒。 来看一下，把鼠标呢从右边移进去，哎，没有问题啊，图片呢出来了，并且呢是有过渡的效果的，下边还有左边 没有问题，然后我再把鼠标呢从上边移进来啊，哎，大家发现图片它切换呢，现在是切换了， 但是现在他又是瞬间切换，又没有过度的效果了，这是为什么呢？其实也很简单， 因为我们第一次把图片从外面移进来呢，他应用了这一个 class 的样式，他的 top left 值呢，已经至为零了，后面再把同一张图片给他应用 这个样式，其实呢，他的位置已经是不变了，只不过修改了层级让他显示出来而已，但是呢，位置没有发生变化，所以呢，没有位置上的过渡效果。那这个要怎么处理呢？我们可以这样子啊，当我这张图片他需要显示出来， 那你前面一张图片再给我回去，是不是就可以了？那你下一次出来呢，就有位置差了，就可以有过度的效果了，那怎么样让他回去呢？ 是不是在应用回这些 class 这些样式就可以回到这个区域的边缘了？但是呢，现在又有一个难点，他怎么知道上一张图片是哪一张呢？也就是他怎么知道哪张图片应该退回去呢？比方现在呢，我鼠标从一给他移到 三啊，现在显示的是图片一对应的这个图片，我鼠标出来，然后给他移到三里面，他怎么知道图片一应该给他退回去呢？这里我们就要想一下，显示出来的这张图片和其他几张图片呢，有什么不一样？ 是不是 class 不一样呢？显示出来的这张图片，他肯定会有 i m g 这个 class， 对吧？所以如果我们把鼠标呢移到三，希望让三对应的这张图片显示出来呢，我们就要去便利一下一 二和四，便利一下这三张图片，看一下哪一张里面包含有 i m g 这个 class， 如果有呢，就让你切换回原来的 class， 这样呢，这张图片它就回到边缘了，所以现在呢，就是 这鼠标移到哪张图片里面呢？我们就便利一下其他三张图片啊，比方说一到二呢，我们就便利一下一三四，一到四呢，就便利一下一二三， 这个呢，主要是为了确定哪一张图片是上一张哈，好让他归位。那怎么让便利剩余的这三张图片呢？直接便利 p i c 吗？ p i c 它是所有图片的一个集合，如果你便利它的话，那它会把你当前这个图片的 i m g 这个类啊，都给它清了，所以呢，必须把当前的这个图片哈给它去除掉，再来便利剩下的。 哎，我们想一下，数组里面呢，有很多可以删除一个元素的方法，对吧？比方说 supplies 或者说 delete， 这里我们用呢应该就 是用 delete， 因为 delete 它把某一项删除掉之后呢，剩余的项它的锁影呢，是不会变的，这样就大大方便我们的操作。但是刚才说的方法呢，它是我们的数组方法，而我们这是获取到的这个集合，它是数组吗？来看一下 这里，它的类型呢，它是 notice， 也就是呢，它是一些节点的列表，它不是数组，它是用不了数组的方法的，但是我们可以把它转换成数组， 这样呢，我们就可以把 p i c 这个结合呢，给它转换成数轴了，输出来看一下，对吧？现在这个呢就是一个数轴了，是由一个中括号给它括起来的，回到代码，现在呢来写一个函数，就叫 pic back， 用来控制图片的归位的。这里呢，我们就要执行一下这个函数，并且呢把 index 给它传进来，然后就要把当前这个图片呢给它排除掉。刚才说了用 delete 这个方法 index， 但是这样删除呢，它也有一个问题，就是它是不会把这些元素呢给你恢复的，删着删着就都没了， 这些元素都没了，你后面就没办法操作了。所以呢，我们要手动把这些元素呢给他恢复一下，现在我们就可以来便利他了，便利他干嘛？ 要找出哪一个？它带有 i m g 这个 class， 对吧？这里可以用 class list 来判断一下，看一下它有没有包含有 i m g 这个 class， 如果它有这个类呢，就让它切换一下，再把它的 class 给它改回去， 也就是呢，给它应用回原来的这些样式，这里的样式呢，它也是从零开始的，零一二三是刚好对应它这个 k 的， 这样呢他就会回到原来边缘的这个位置了。好来看一下有没有问题，把鼠标呢移进来。 哎，他切换图片呢，好像没有问题了，都有过度的效果了，但是为什么他切换当前照片的时候呢？他的底 好像是空的，对吧？没有图片，这是因为当前图片呢，他要进来的同时上一张图片，他要返回出去，这两步是同时进行了，就会感觉底部呢没有图片一样。这里我们只要让上一张图片返回出去的过渡，让他晚一点直线 就可以了，给他零点五秒，因为当前图片他进来呢，刚好需要零点五秒的过度，就等他完全进来上一张再返回出去就可以了。前面几个呢也要加上。 ok， 来看一下最终的效果。把鼠标从左边移进来，没有问题，上面右边下面再移进来，没有问题啊。好，这个视频就到这里，感谢大家的收看。

大家好，前面我们用了两个视频实现了这个图片轮播的基本功能，并且把在 com 里面的动画抖动这个问题也做了优化。不过呢，还是有同学提了一个小要求，就是这个轮播的效果挺不错的，但是竟然需要手动去切换图片，瞬间拉低了这个 level， 对吧？ 我们平常网站上面看到的图片轮播一般也是自动播放来切换图片的，主要考虑到用户他不一定会主动去点击这个切换按钮，所以我们这个视频来升级一下这个轮播功能，做一个最终版，实现图片的自动切换。 先来看一下我们最终要实现的效果，现在我并没有点击下方两个按钮，整个轮播呢是在自动播放自动切换图片的，这个时候，当用户浏览到吸引他的内容，我们需要把轮播暂停下来，对吧？很简单， 只要把鼠标移到图片里面播放就会暂停下来，方便用户来阅读里面的信息。这个时候呢，图片的轮播虽然暂停了，但是用户还是可以通过按钮来切换图片的。 并且如果用户手动切换了图片播放的方向，比方说点击了下一站的这个按钮，再把鼠标移到图片外面，轮播自动播放的方向呢，也是往下一站来自动切换的。 如果用户点击了上一张的这个按钮，再把鼠标移出去，自动播放的方向，就是自动切换到上一张了。好，我们就来看一下这个功能呢，要怎么实现？ 这个是我们前面视频写的 j s 代码， h m l 和 c s s， 大家看回之前的视频就可以了，我们这个视频主要来改一下 j s 之前写的 j s， 把它们注视掉吧，我们重新来写。先来 声明一个函数，用来控制图片切换的，我们把前面控制图片切换的代码呢，给他复制一下，这里呢是切换到下一张的，还有这个切换到上一张给他复制过来，还有前面这里获取到这个数组的也要拿过来， 还要声明一个变量，用来控制播放的方向的默认值呢，为处函数里面呢，再来判断一下，当 delete 为处的时候呢，也就是我们控制轮播的默认方向，就是往下一站来播放，否则呢就让他改变方向，往上一站来进行播放。 我们现在给他开个定时器，让这个函数呢不断的跑起来， 每隔两千五百毫秒呢，执行一次这个函数，这样子，这个图片轮播呢，就可以自动来切换图片了，只不过一开始只可以往默认的这个方向来进行切换。来看一下效果。 刷新一下，隔两千五百毫秒呢，这个图片轮播就可以自动来切换图片了，不过呢，现在只可以往这一个方向来切换哈，我们接着往下面来写，先来处理一下，鼠标移到图片上面呢，可以暂停播放。我们对这个最外面这个大的盒子啊， 给他来添加一个事件绑定，让他监听一下鼠标经过的这个事件， mouse over 这个事件哈，当监听到这个事件呢，让他执行一个处理函数，把定时器给他清掉就可以了。来看一下效果，这里呢先把时间调短一点， 方便测试。刷新一下，让轮播呢自动播放起来， 然后呢把鼠标移进去，哎，这个轮播就暂停了，要是把鼠标呢移出图片外面哈，还要让它继续播放起来，这里呢，给它复制一下 mouse over， 就改成 mouse out， 再让定时器呢给它重新执行一下。 来看一下鼠标移进移出有没有问题，刷新一下，让他播放起来，然后呢，把鼠标移进去，他就暂停播放了，把鼠标呢移出来， 又接着播放， ok， 没有问题，再来处理一下。当把鼠标移到图片的时候呢，已经是暂停播放了，这个时候我们允许用户 可以通过下方的两个按钮来手动切换图片。通过按钮来手动切换图片呢，我们把之前这个代码给他复制过来就可以了，之前呢，就是通过这个按钮来控制的， 把注册呢全部给他解开，这里面就不需要执行这两句代码了，直接执行一下某这个函数。下面这里呢，也一样， 不过呢，现在无论点击哪一个按钮，上一张这个按钮，或者说下一张的这个按钮哈，他们进来之后直行 move 这个函数，执行的结果都是一样的， 都只可以往下一章来进行切换，很简单，对吧？当执行 move 这个函数的时候呢，他会进入这个 if 条件语句里面，但是这个条件这个达六神呢，目前来说他是真的，所以说他不会进入 l 这个语句里面，只 会执行上面这一句，也就是说只会往下一张来进行切换，来看下效果。先刷新一下，让它播放起来， 把鼠标移进去，他暂停播放了，看一下可不可以通过按钮来切换哈下一张，哎，没有问题，对吧？ 但是呢，当我点击上一张的时候呢，其实他还是播放的下一张哈，方向呢，和刚才是一样的，看一下这里呢，怎么样给他处理一下，其实也很简单，只要想办法呢，让他执行这一句代码就可以了，对吧？ 也就是说，当用户点击了切换到上一张的这个按钮，我们只要修改一下 diaction 这个值哈，让它变成 force， 这样当它执行木这个函数的时候呢，就可以进入 if l 这个条件，与距的 l 分之了。同理，前面执行函数 之前呢，也要把 delete 给他改为处好来看下最终的效果。刷新一下，让他播放起来，然后呢，鼠标移进去，他暂停播放了，点击下一张， 没有问题哈，然后呢，现在点击上一张，哎，没有问题，再把鼠标呢移出去， 现在呢，他就是往上一张的这个方向来播放的哈，给他切换一个方向，再移出去，哎，没有问题。好，这就是我们这一个图片轮播的全部内容哈，感谢大家的收看。

大家好，欢迎来到我的 x 交互分享频道，上一期介绍了动态面板的各项属性，接下来我就用动态面板来制作一个简单的轮播图效果。首先还是创建一个动态面板，命名为轮播图，然后双击动态面板 见几个状态。这边建议还是把状态的名称重新命名一下，然后选中第一个状态，也就是第一张，在画布里面放入第一张图片，然后在第二张、第三张 以至于第二张都放入你想用的图片，然后就关闭动态面板的编辑页面，我这里就用按钮的点击事件为案例，用按钮的点击事件来触发轮播图的轮播效果。选中按钮，点按钮创建一个点击事件，这里选择设置动态面板，状态选。 在交互设置页面中选择轮播图这个动态面板，把状态选项中的默认选项改为选择 next。 选择 next 后，这里会出现一个选项，意思就是是否要重复轮播。下面的交互动画选项就根据自己的需要进行调整， 这里的选项是每一页停留多少秒，以及首次播放时第一页是否需要延迟相同的时间。这里把两个选项都需要都选上，点击确认后，轮播图的效果就完成了。当然这是最简单的版本， 不过现在的轮播图都会有这种定位按钮作为高保真原型图，怎么能不去实现呢？哈哈哈，下一期我会讲一下带定位按钮轮播图效果的制作方法，喜欢的家人们可以关注一下哦！这一期的视频就先到这里，我们下期见。

我们现在呢要将添加到数据库的轮不脱显示到后台管理页面中。大家好，我是陶老师，我们在上一讲讲到了轮不脱后台的添加， 那么这一讲呢，向大家分享怎样将数据库的轮不图显示出来。我们先来创建一个记录集，选择轮不图表， 然后呢按 id 的降序进行排列，点击确定，我们来插入一个表格， 然后呢确定创建号表格之后呢，我们将数据库里面的动态字段，把它拖放进来，找到绑定，然后将 it 拖到 第一个，然后呢我们依次将这些进行拖入，这样建立好之后呢，我们选中第二行，然后找到服务器行为下面的加号，设置重复区域， 显示十条记录。然后呢我们光标定位到图片下面，这个动态制度啊，切换到拆分模式下，我们在这里呢输入图片的标记 以 mag， 然后我们设置它的 s， r， c 等于呢图片这个动态制作的内容，接下来呢，我们设置它的宽度， 高度。好，那么这样设置好之后呢，我们保存这个网页，然后呢我们再 网页预览里面进行刷新，这个时候呢，伦布图已经在后台显示出来了。好，今天的分享就到这里，欢迎点赞加关注。

有些新手的小伙伴对于手写一个轮波图可能感觉有点难度，这里推荐一个可以快速实现轮波图效果的插件。 swipsvip 是一个开元免费强大的触摸滑动插件，可应用在 pc 端跟移动端上 使用。 swift 只需要复制粘贴，简单的修改就能快速实现一个轮播图效果。这里开始使用 swift 需要先加载对应的 gs 跟 css 文件，可下载到本地使用，或者通过 cdn 方式引入。为了方便这里使用 cdn 方式引入文件， 文件引入完后开始添加 hkml 内容，直接复制这 这里的诊断代码，放大波比标签内，这里不需要滚动条，直接删除这行代码，然后给 svb 定义一个宽高大小，这里将宽度设为八百 px， 高度设为四百 px。 接下去就是 js 的逻辑初始化， sv 直接复制整段 js 代码，将其放到波比标签后面， 这里的垂直切换选项删掉，因为要的是默认水平方向切换，因为不需要滚动条，这行代码也一起删掉。这时候就可以在浏览器看下效果了。 为了效果更加明显，给三个轮播放上图片，这里已经准备好了三张图片，在这三个 div 标签内放上 i、 n、 g 标签，引入图片，然后给图片统一设置宽高大小，跟思维一致。这时候再来看一下效果， 可以看到轮波图通过点击左右的箭头可以进行切换，也可以通过鼠标的左右滑动来切换，这就是线轮轮波图的效果，简单又快速。

咱们前端的很多界面啊，他都会有这么一个轮波图区域，这种区域呢，他的实现的思路有很多，我这里呢给大家提供一种思路，同学们如果说有别的思路的话，可以在咱们技术交流群里边讨论讨论 啊。我的思路呢是这样，首先开取一个 div， 我们姑且呢把它名字呢叫做康天纳啊，一个容器，这个 div 呢，就是包含整个轮波图区域的容器，里边有啥呢？里边呢，我给他再放一个 div， 这个 div 呢，把它取个名字叫做开了， ceo 表示一个走马灯，这个区域呢，实际上就是这个图片划来划去这个区域， 这个区的宽高跟那个复元数的宽高是完全一致的，也就说完全的充满啊，当我这个图上画的没有那么严实和缝合，不然的话你就看不清楚了，实际上是撑满的。那么这个区域里边呢，就放的是一张一张的轮播图啊。当然呢，我们这里用的是 div dna， 里边放啥其实无所谓了，你可以放图片，也可以放些文字，也可以放图片加上文字，比方说有些轮播图 里边会有一些标题在里边，对吧？那都无所谓，反正随便放。那么这些 div 呢，你必须要把它布局成这个样子，你只要能把它布局成这个样子就简单了。其实要实现这样的一个布局的话，一个非常简单的方法就是使用弹性盒啊，弹性盒就是横向开裂嘛， 对吧？反正你把布局成这个样子，然后你看我们现在是什么情况啊？我的眼睛看的是这个区域，那么我们只需要找到这三张轮波图的复原数啊，也就是这个橘色的走马灯这个区域，然后控制这个复原数的位置，不就完事了吗？比方说我们把复原数往左边移，移个身位，是不是就看到第二张了？ 以两个身位是不是看到第三张了，对吧？啊？当然了，我们也可以把它移回来，又回到第一张，就这么简单，那么说我们到时候如何把它进行左移右移呢啊？如果说你没学过 c 三，那么你使用那个 martin left 也可以搞定。你学过了 c 三，那就使用 chestnate 都可以搞定的啊。目前呢，还有个情况，就是整个区域啊，它外边超出了一些东， 比方说第二张图，第三张图是超出这个区域的，那么我们只需要针对整个区域啊，也就是最外层的元素，给他设置一个溢出隐藏，不就完了吗？就完事了。那么现在我们的切换呢，就跟我们想象中的是一样的啊，我们回到第二张啊，到第三张啊，这样的切换呢，就跟我们看到的轮播图就是完全一样的， 那么这个走马灯区域其实就搞定了。搞定了走马灯区域之后呢，那么还有一些指示器呢，那就很简单了，对吧？你回到最外层的元素里边，你用一个绝对定位，把这个指示器呢贴到这个位置，不就完事了吗？对吧？所以说整个轮廓图的布局呢，也就这样了，布局完事之后啊，那么就是结实的交互代码，交互代码也很简单， 你只要能够搞定这么一个函数就完事，就熄火。这个函数啥意思呢？就是我们只要一调这个木兔，他就能够把轮波图移动到指定的板块，比方说啊，我们调一个木兔零就划到第一章，一定要木兔一划到 第二章，依次内推。有了这个函数之后，那么你只需要给这些指示器呢去加上一个事件不就完了吗？对吧？点第一个的时候呢，调用木头给他传一个零，点第二个的时候呢，就调木头给他传一个一。所以呢，介绍呢，也很简单，其实轮播图啊，他的思路并不复杂， 你只要找对了思路，那拖鞋就没有什么问题啊。当然，如果说你希望袁老师在下节课把代码也给他写出来的话，那么请在评论区啊打出留言上代码。

只需十行代码就可以实现网页轮播图，想学习的点赞收藏后请继续往下看。首先准备素材，然后打开代码区，插入一张图片，设置好宽度和高度， id 设置为 m g s。 接下来在 scraping 标签里编写 java scraped 代码。首先设置切换时间间隔，每隔两秒切换一次。创建一个空数组， 设置第一张图片的缩影制为零。初始画一个具有三张图片的数组。 然后在下面写函数，获取 i 地位 i a g s 的 h t m u 元素，并将其放在变量 my m 中。下面写切换条件，如果切换到最后一张，那么从第一张开始切换，否则继续循环。 通过不断修改 i m g 的 s i c 属性，实现切换图片， 大功告成！网页制作 web 前端课程，在下方链接，想学习的赶紧去报名！

大家好，今天分享一下轮播图的简单案例，这个案例是仿照 b 站的简易实现啊，我这里有六张图片，就是这六张，可以看一下，这里有六张图片， 六六张图片。呃，他会定时的切换每一张图片 啊，这个小圆点也会跟随跟随着激活，以及我们这个还有一些其他的效果。比如说当我们鼠标移入的时候，这个轮播图要停止播放，以及点击上页下页其实是可以生效的，以及我们这个移入这个按钮的时候也要停止播放， 停止播放以及我们移入小圆点也要停止播放啊，当我们点小圆点也是能生效的啊，这里可以看到我们小圆点有一个向上位移的效， 这个看上去有一种动感。然后另外就是我们这个呃，鼠标移入按钮的时候，这个按钮会有一个明亮度的一个变化，表示我们选中了，嗯，然后我们简单看一下结构， 结构的话主要就是呃三部分，就是这三部分， h t m o c s 和 g s。 先看 h t m l 三部分，首先我先把这个截个图， 拿这个灰色的明显一些定在这里。好，首先是这个图片区域，就是这整个灰色的区域， 其次这个小圆点区域，就是这这六个小圆点，我这六张图片，然后就是这个按钮区域，这里两个按钮啊，左箭头和右箭头两个按钮， 然后小圆点，小圆点，我这里给了小圆点一个锁引号，自定义属性的锁引号，因为我点击某个小圆点，我要知道他点的是第几个表示，然后我来我会来取这个值来，呃，定位到具体的图像以及图像的显示 啊，然后这里注意有一个 on， 表示我激活的哪一个图像，假说我现在是最后一个图像，其实我这里应该有个 on 的。呃，这个 on 我们看可以简单看一下它的定义 在哪呢？啊？这里我们给我这里给了一个背景色是金色，同时这个我会给他放大，放大表示选中的。嗯，然后刚刚提到的这个属于这个的动，动态的一个效果，就这个，你看我放轻了之后 有这个洞的效果，其实是这个。呃，这个这个悬浮上去这个颜色透明度里面，假设我住掉看一下效果，我们需要最后一张，需要最后一张，可以看出来他并没有效果这种，这种不是我们想要的 啊，就是通过这里来实现的啊，其实他们就这个按钮，按钮他默认是二五二五零点一，这两个是一模一样的，只是这个透明度的一个变化啊，其实 b 站也是这样子的， 然后这是这个小圆点的这个向上位移，小圆点的向上位移，他有个洞的感觉是这里，看看在哪啊？这里小圆点悬浮上去的时候会触发这个位移，向 y 方向位移一下。好，然后 就是这个功能部分啊，功能部分，刚才，嗯，主要是他的每一个小圆点的功能以及按钮的功能都能生效 啊，以及我们啊刚刚没提到的这个鼠标一进去要停止播放，像这个鼠标一定要停止。 好，这里要注意。嗯，我这里的实现是定义了一个全局的图像锁引号来切换图片，因为我这里只有一个图片嘛。 啊，我定义一个全球锁印号就表示我当前我要显示第几张图片，我就通过这个锁印号去取对应图片的 src， 把它替换，替换这个同时把他的 lt 也替换，就是他的名字，我这里用名字来的。呃，小 圆点，跟随这个小圆点的这个自动的这个切换也是通过克拉斯的名字，就刚刚看到的这个 on， 这不有 on 吗？啊？还有一些显示图像的函数公共提取，因为我点下一张，上一张，这里他要显示图像， 以及我点某一个小圆点都会显示图像，这里是通过，呃定义一个公共的函数来实现的，可以简单看一下。 呃，我这里有六张图片，呃，也是一个数组，一个图像的对象定义了一个 s r c 以及以他的名字， 这里是选中这个两个按钮，这是选中这一张图片，这是这个所有的，这里有 or， 这是所有的这个小圆点。 好定义的。时间图像的缩影号默认是零，因为这个数组下边也是从零开始的。好定义的一个显示图像的函函数就是小圆点移这个小圆点，比如我当前在这里我要移出它的显示 remove， 移出显示， 并且显示下一个小圆点，这里显示下个小圆点，通过这个动态的获取这个这个第几个切尔的来实现。增加一个，按这里增加，按这里取消，按这是这个小圆点，然后图像上面 图像，呃，可以看到我替替换的这个图像 images， 就这个 image 是它的 image， 呃，替换它的 s r c， 就是这个数组里的 s r c， 把它取过来替换一 他的耐磨性。替换还有一个定时器，因为这个定时器我要反复的移入，移出，添加和删除定时器，所以说这里要单独弄一下，提出来好给就是接下来就是给这个按钮绑定这个上下页点击的事件， 通过改变这个锁引号刚刚替代的这个全局锁引号来替换锁引号之后显示图像，因为显示图像当中我会用了这个锁引号，可以看一下这个锁引号，我用了锁引号，所以说，呃，这个很有必要的 获取定时器，末了给默认给他一个定时器，因为一加载就会默认那个。呃，切换，这里定义了两个函数，呃，主要是停止， 停止这个播放和开始播放，停止播放就把这个电视器移除，开始播放就，呃再重新取一下这个摊门就可以了啊。这做了个保险操作，就是说，呃，每次开始之前先移除上一个 啊，这里就主要是一些一入一出事件，我这里做的是把这个图像和按钮和小圆点都增加了，这个一入一出事件其实是可以通过给这个整个容器增加事件来实现一入一出的这么一个停止的效果。我这里是个每个元素增加的， 然后，嗯，这里是那个图像 inmate 给这个图像增加了移入事件和移出事件，然后小圆点，因为小圆点上面是所有嘛获取所 这个小圆点，所以说我这里有循环给每个小圆点增加了一入一处事件，一入他需要停止，一处要开始以及小圆点的点击事件，因为点击要切换啊，这里也是改变所有，然后再显示的是刚刚对应的图像， 一个上一页下页啊，我们呃给上一页增加了两个事件，一个是上一页的一个移入事件和移出事件。呃，刚刚上面也有上一页的点击事件， 这个要给他增加一入一处，也是为了让这个定时器停止和开始啊，一下也也是一样的啊。最后呢，最后来看一下吧，刷新，哎，这里可以点， 也可以上页下页，上页下页都是没问题的停止啊，就这样今天的分享就到这。

这是一个轮播图，他会自己滚动，并且我们点左右也可以滑动这个图片，点底下的这个指示器可以显示对应的这个图片，然后我们点图片的话也可以跳到相应的一个网站，这个就是我们今天要实现的按钮轮播图。 如何用图片可以左右滑动是轮模图的一个难点，我们首先要试着先用 c s s 去实现左右滑动图片的效果，接着再用专属可以控制 c s s 样式的词来实现点击切换图片的效果。 接着是控制按钮在轮摩图片上的这个定位，最后是鼠标悬停的时候显示这个按钮，鼠标拿开的时候按钮半透明。开始写我们的代码，项目中有一个 cet 是文件夹，文夹里面 放在三张演示用的图片，然后我们就可以开始写代码。首先我们来思考一个核心的问题，如何去实现图片轮播的左右平易。 我们可以试着把图片并排在一行，然后将其在显示框内左右移动，接着显示框隐藏溢出部分即可。我们先来演示一下创建两个 div， 外部的 div 作为轮波图显示框，给他设置一个宽高，为了方便观察，还要设置一个边框 内部的颜色假设为我们的图片设置高度为百分之百，宽高则超过外部 div 的宽度，给个显著的背景色。 内部的 div 设置 position relative 的定位，在设置 lept 为复数，通过在控制台中实时控制 lept 的数字， 我们就能看到内部方块的左右移动了。首先告诉我们只要把图片水平排列，修改 lift 样式的值，我们就可以实现图片水平滚动，尝试把图片放上去。 虽然让图片水平排列有很多方法，这里我的建议是对于任何元素的排列对齐，不管是水平还是垂直，我们都使用弹性盒子布局， 因为弹性布局已经被所有浏览器支持了，灵活程度也是最高的。很多网站不管是租货还是 b 站，都已经大量采用了弹性盒子布局。 我们先将图片的宽高设置为轮波图，显示宽的宽高，那么我们先设置肯天的的宽高为百分之百，再设置轮波图的宽高为百分之百，别忘了设置布莱克时 顺口为零，防止图片宽度被压缩。还要设置图片的 object b 为 car， 防止图片宽高比被改变。那么如何控制图片的滚动呢？这个问题问的比较宽泛，没有唯一的答案，而且比较考验编程功底，同学们可以多暂停一会，自己尝试实现一下。 一开始我们就尝试过，只需要设置肯定的元素相对定位的位置，也就是雷布特样式的纸，又可以控制图片的滚动。 要显示哪张图片，则内部特样式词为轮波图的宽度乘以图片的下标，别忘了同时乘以负一。比如要显示第三张图片，那就是宽度六百乘以下，标二乘以负一，得负一千二百。第二张图片就是宽度六百 乘以下，标一乘以负一，得负六百。首先通过代表我们的思路正确了，可以继续往下写代码 定了一个变量音，这个是表示显示的图片下标。再定一个 li pro s 函数，先是获取轮播框元数，再获取轮播框的宽度。把我们刚刚的计算过程写成代码，设置肯定的人数的 lept 样式值， 别忘了掉入 res 函数。由于轮廓图的宽度在史带的标签中设置，我们将所谓的标签放到史带的标签之后才能起作用。这下我们只需要修改引电格式的字就可以决定我们要显示的图片了。 下一步我们加几个按钮控制图片的滚动，两个左右滚动的按钮，三个控制显示哪张图片的按钮，左移的按钮就让你 dex 减一，右移的按钮就让 带数字的按钮就让他按下标，控制图片的显示。别忘了函数最后都要调用一下 repress。 这样看来我们还需要再限制下标的范围。 当我们也可以手写一个 represe 函数装饰器来包装我们的函数，那么我们就不需要每次都显示的调用这个 represe 了。下一个问题，如何设置图片的动画效果？ 这个问题应该不是很难，我们可以设置过度动画样式来实现。设置过度的时间为一秒。 把左右的巴腾与指示器巴腾放到不同 div 中作为紫元素方面管理，并把花藤元素改成 div 元素，再分别设置样式。 对于左右按钮，我们使用小于号和大于号，由于小于号和大于号会与元素标签冲突，所以我们这里使用转移支付。 为了防止左右制服被选中，我们设置如色色 letter 样式为难。 下一个问题，如何将我们的按钮定位到轮廓图之上， 设置左右按钮呢？剖析审为而不说的题为绝对定位。由于是相对 轮波图绝对定位，因此轮波图的剖析损要设置为 relative。 由于剖析损为 of sort t， 是相对祖先元素，最进一个剖析损不为 stadic， 也就是默认定位的元素经营定位。 先将左右按钮放到轮摩框中作为指元数。将左右按钮的 top 与 bottle 设为零，并将摸准设为 otal， 使其垂直居中。 左边按钮设置 lift 为二十个像素，右边按钮设置 red 为二十个像素。 同理，指示器按钮也是通过绝对定位来实现。 对于底部的指示器，我们 采用动物操作的方式生成，保证其数量与图片元素的数量一致。 操作一下螺纹框的圆角，去掉边框， 将图片放到 a 元书中。别忘了 a 元书的框高也要设置。下一个问题，如何让鼠标移动到轮模图内显示按钮？ 我们将按钮的不透明度设置为零点五，那么只需要在鼠标移动到轮播框上时改回一即可。这里应该使用后外选择器。需要注意的是，我们要让鼠标移动到哪个元素上显示按钮，那么后啊，应该跟在哪个元素的类名之后？这里 后啊，应该放在轮廓宽的内容之后。 roll said interval 可以自动滚动，但出现了个问题，如果我点击按钮时刚好自动滚动，那么看起来就像连续滚动两下，效果很不好。因此每次滚动过后，我们需要重置一下自动滚动， 那么到这里就完成了。希望大家都能学到知识，点赞到一千会立刻更新下一个 iv， 谢谢大家的支持！

大家好，这个视频来做一个无缝滚动的图片轮播。先来看一下完成之后的效果，首先在浏览器上面呢，有四张照片从左往右移动，并且是循环播放的，如果我们希望轮播可以暂停下来呢，很简单，只要把鼠标移动到图片上面就可以暂停了。 这个时候我们把鼠标移动到图片靠左边一点的位置，哎，他出现一个向左的按钮，移动到右边呢，他出现一个向右的按钮，在中间是没有的，这两个按钮呢主要是用来切换这个轮拨的方向的。 好，我们先来思考一下整一个思路，这个呆萌的重点呢，主要就是怎么样让图片可以无缝滚动起来，因为我们只有四张照片往一个方向轮播，当播放到最后一张照片的时候，第一张照片他是怎么样做到很平顺的衔接过来的， 还有怎么样控制这两个按钮哈，只有鼠标在靠左还有靠右的这两个区域才会显示出来，这个区域又是怎么样计算出来的？ 这个呆萌我将会分为两个视频来跟大家讲解。第一个视频主要来说一下布局，通过 c s、 s 在这个例子里面可以实现哪些功能， 包括图片上面这两个按钮哈，当我们鼠标只有在左边还有靠右边才会显示的这两个按钮，我们也是用 css 就可以实现了，不需要用到 gs。 下个视频我们再结合 gs 把图片的轮播给它做出来来看一下代码。 html 结构呢，还是比较简单的，上面这个 i d v m g 这个 diff 放的就是用来轮播的四张照片，下面这个 diff 主要放的就是用来切换轮播方向的这两个按钮。 一下 css 样式，上面呢写了一些基本的居中样式哈，这里没有什么好说的，其他样式呢，我们重新来写。先来定义两个变量，等一下呢，有好几个地方用的到，宽度呢，九百六十像素，还有高度 五百四十像素，这个大小呢，就是轮播图的缺页，还有这个图片的大小。后面如果我们要修改这个轮播图的大小呢，直接在这里来修改就可以了，就不需要找到每个元素逐个去修改好。先来设置一下这个轮播图最外面这个 diff， 它的样式， 宽度和高度就是刚才定义好的这两个变量，直接给他引用过来就可以了。加点阴影片，一值为零，模糊程度十五像素，扩散半径呢，五像 颜色为半透明的黑色，再加十像素的圆角。接着来设置一下 may 这个 diff 它的样式。这里大家可能会有疑问哈，下面这四个 diff 呢，是用来轮播的这四张照片来的，外面已经有一个 id 为 i m g 这个 diff， 我为什么还要给他套多一层 id 为 may 的这一个 diff？ 其实这个轮播图的效果呢，我并不是控制照片来进行运动的，而是控制这些照片它的一个整体，也就是呢， id with may 的这个 diff， 控制它来进行运动的，所以这里我就有必要给他多套一层 diff。 先来设置这几个轮播图的样式。 made 里面的 diff 宽高和圆角呢，可以复制一下上面这个 i m g 的这个阴影，不需要，还要单独给每一个 diff 给他们 设置一个背景照片，这些 diff 呢，我是通过 id 选择器来选中他们的，这里用尾类选择器可不可以呢？也就是用 first try， non try 这些 做布局的时候呢，没有问题，但是后面结合 js 做轮播的时候，用尾类选择器是会有问题的，这里呢，直接用 id 选择器就可以了。先来看一下效果， 这是个背景图片呢，出来了，但是他们是竖着排列的，对吧？我们这个轮播图呢，他是水平方向移动的哈，所以呢，这里我们要先把这些图片呢，让他水平方向来排列， 控制这些 diff 在一行上面排列呢。我们只要对他的复元素，让他 display with flesh 转换成一个弹性和容器就可以了，因为弹性和容器里面的元素哈，他默认就是沿着这个容器他水平主轴方向来进行排列。 来看下效果。刷新这四个照片现在是在一行上面排列了，但是很明显他们被压缩了，因为这几个 diff 的总宽度加起来已经大于他负极的宽度，然后他们的负极又是一个弹性和容器，所以呢，会把他们压缩起来。 如果说你不希望这些元素呢给它压缩起来，我们可以对它里面的元素呢设置一个压缩比例哈， flashink 设置为零，这样哪怕他们的总宽度超过了负极的宽度，也不会被压缩起来了。来看一下效果啊，现在这些 def 的宽度和高度呢，没有问题了， 但是里面的背景图片很明显还没有显示完全，对吧？要让背景图片尽可能等比例铺满这个容器呢，我们可以设置一个 background size， 选择 cover。 再来看一下刷新，现在这些 背景图片呢，就可以完全显示出来了。然后就是这个轮播图的范围哈，他这个范围呢，其实是刚好可以显示一张图片的大小， 最外面这个容器呢，它的大小我们已经设置好了，和图片的大小是一样的，再给它设置一个 overflow hidden， 让它溢出隐藏掉就可以了。 再来刷新一下，现在呢就只有一张照片在这里了，其他的隐藏掉了，后面再通过 gs 控制这几张图片的负极容器运动起来就可以了。 现在要通过 css 来控制的还有这两边这两个按钮哈，我们可以思考一下怎么样可以让这个鼠标当它移动到这个区域靠左边的时候呢，出现一个向左的按钮，移动到 右边的时候呢，就出现一个向右的按钮，在中间的时候呢，是没有按钮出现的哈。 先来简单分析一下思路。首先呢，我会在这个轮播图的上面放一个大小和他一样的容器，也就是呢，这个 id 为 mask， 这个 diff 在这个 deep 里面呢，我在做两个遮罩，宽度呢都是百分之二十五，高度和图片一样。然后呢一个放在左边，一个放在右边， 每个遮罩里面呢都做一个按钮，这两个按钮一开始是让他们隐藏起来的，最后呢再通过 over 为类，当鼠标移到这个遮罩上面，再让对应的这个按钮给他显示出来就可以了。 好，先来设置一下覆盖在轮播图上面的这个 diff， 它的大小呢和伦波图是 一样的，所以直接引用一下这两个变量就可以了，再给个背景颜色呢，可以看一下他的范围，看一下效果。现在呢，红色这个地府呢，他并没有覆盖住这个轮播图，对吧？而是呢，和他并排在一行上面， 这是因为 body 也转换成了弹性和容器，所以呢，它里面的元素默认也是会沿着水平轴方向来排列的。 我们要让这个的覆盖在轮播图上面呢，也很简单，给他设置一个绝对定位就可以了。 刷新，现在呢，这个红色这个地就完全把轮播图给它覆盖住了。接下来我们就可以在这个容器里面呢做两个遮罩，宽度为百分之二十五，高度呢为百分之一百，再加个层级。 个背景颜色呢，看一下位置好看一下效果。先刷新，先把红色这个背景给他去除掉吧，不需要了，再来刷新。现在呢，两个遮照出来了，不过呢，他们是竖着排列的，给他们改个颜色吧，看起来明显一点 好， ok， 现在这两个遮罩是一上一下排列的，我们的想法是让他一个排在左边，一个排在右边，这里看一下怎么样呢？给他调整一下， 首先我们要让他在一行上面排列呢啊，很简单，还是让他 display 转换成弹性和就可以了。这里呢刷新，他就排在一行上面了。 接着我们再来想一下，怎么样可以控制这两个遮罩，一个排在左边，一个排在右边，这里是不是可以通过修改他主轴上面的排列方式，对吧？给他一个 space between， 来看一下有没有实现我们想要的效果哈。刷新，对吧，现在两个执照呢，就一个排在左边，一个排在右边，我们再在他们上面呢做上一个按钮。 先来做左边这个按钮，大小呢，一百五十乘以一百五十，再给他设置一个圆角哈，让他变成一个圆背景颜色，再加一点阴影， 再设置一下字体大小，加粗一下，卡了，这里露了个 i g b a， 设置一下文字的水平居中，看下效果先。现在这个按钮 好像大小有点问题，对吧？这里是个 spend， 我们还要给他转换一下哈，让他变成个 in like block 这样子呢，大小才出来好， ok， 这样按钮在这个遮罩里面呢，水平垂直居中。先给他做个定位 top 呢，百分之五十 还要做个 translate 平移哈 x 轴呢，让它平移四十五像素，这里是计算出来的，就用这一个遮罩的宽度，减去这个按钮的宽度，除以二 y 轴，就向上平移它自身高度的一半。好，来看一下按钮有没有在遮罩里面，水平垂直都居中哈， 没有问题，再把右边这个按钮呢也做出来。这里两个按钮呢，用了两个 id， 其实他们 的样式是一样的，我们直接用 class 做呢，也可以改一下哈这里，然后 c s s 这里这个名称也要改一下。上面这个遮罩的背景颜色呢就不需要了。 好，来看一下效果哈这里呢，刷新， ok， 现在呢这两个按钮的位置呢也没有问题了，我们再结合一下啊，我为类啊，当鼠标呢移到左边这个遮罩的时候呢，就让左边这个按钮显示出来。移到右边这个遮罩呢，就让右边这个按钮显示出来。 一开始呢，先让这两个按钮呢让他隐藏起来，然后对两个遮罩呢添加一下 over 为类。当鼠标移上去的时候呢，我控制他对应的这个按钮啊，现在呢是左边这个遮罩，还有右边这个遮罩呢也一样，这里呢改一下。 这里呢很简单，就当鼠标移到对应的遮罩上面，我们让它里面的按钮显示出来就可以了，直接让它设置成 visible。 当鼠标移到这个按钮话筒上面的时候呢，再简单的给它修改一下样式。先修改一下光标的样式，出现个小手，再来修改一下背景颜色， 好来看下效果。刷新。现在呢两个按钮就隐藏了，我把鼠标呢移到图片的中间是没有效果的，移到左边呢，哎，左边这个按钮呢，他就显示出来了哈，移到右边没有问题。 css 部分呢，到这里就完成了。下个视频我们就结合 js 把无缝滚动的轮播效果呢给他做出来。好，这个视频呢就先到这里，感谢大家的收看。

大家好，前面我们做了几期关于图片轮播的教程，都是基于 gs 来实现的，有的同学问我们只用 css 的话，可不可以实现这样的效果，我们这个视频就来看两个简单的只用 css 就可以完成的图片轮播。 不过呢，这里要说一点，由于 css 没办法反过来操作动，所以呢，是实现不了功能很完整的轮播图效果的。我们这里就尽可能来看一下只用 css 可以做到什么程度。第一个就是这种带有选项卡功能的轮播图效果，我们可以通过下方几个小圆来控制对应的图片显示。 第二个呢，就是类似跑马灯效果的无缝滚动图片轮播，这里我们鼠标移进去呢，可以控制轮播暂停，但是只用 css 呢，是没办法随意控制轮播的方向的，所以呢，我把这两个结合起来，做了一个 功能看起来稍微完整一点的轮播图效果哈，我们把鼠标移进去呢，哎，轮播暂停了，并且出现了选项卡，可以手动来切换图片的显示， 再把鼠标移出来呢，哎，轮播继续了，看起来没有什么问题，但其实这个功能呢，有点小 bug， 大家呢可以自己来试一下。这几个都是通过 c s s 就可以实现的，这里呢，我们先把前面这两个呆萌呢做出来， 来看一下代码。我们先来做这个跑马灯效果的图片轮播，看一下 htm 结构，这里面的三个 d 就是用来轮播的三个图片，这里呢是用背景图来做的， 然后在他们的外面包了一层 id 为 container 的地。等一下呢，就是控制这个地方的运动来产生轮播效果的，还有样式，上面写了一些基本的样式，其他样式我们重新 先来写，先来看一下现在的布局，现在这几张照片呢是竖着排列的，但是我们的轮播是水平方向的，所以呢，我们要让这几张照片呢在一行上面排列， 给空天的这个底设置一个大小， mg 的宽度呢是四百八，三个的话就幺四四零， 高度呢是一样的，都是二百七，要让它里面的元素水平排列呢，把它转换成弹性盒再来看一下哈。 ok， 现在他们就在一行上面排列了，我们再想办法让空天的这个地让他运动起来，这里我们给他绑定一个动画就可以了，酵母 我们就控制它在 x 轴上面呢发生位移就可以了。一开始是零，到最后 应该运动到多少呢？是不是运动空天呢？这个地他自身的宽度，对吧？而且呢，这个轮播是往左边运动的，是负的幺四四零，再把这个动画绑定到空天的上面就可以了，让他五秒钟来完成哈，线性的循环。 来看一下现在可不可以运动起来，没有问题啊，可以运动起来，但是到最后竟然没有照片了，对吧？他镂空了，因为我们这里只有三张照片，那怎么样可以做成这样子无缝滚动呢？ 是不是把第一张图片给他多复制一份，放在最后，给他做个障眼法，在瞬间把前面第一张给他拉回来，对吧？思路大家可以参考我前面用 j 做的轮播图，思路是一样的，现在空天呢里面呢，我给他多增加了一个点， 所以他的宽度的话也要随之增加哈，这里呢就变成幺九二零，看一下还会不会镂空出来哈， 滑到最后一张，然后呢，瞬间把第一张拉回来，对吧？没有问题，再来控制一下，单鼠标移上去的时候呢，让动画暂停下来，还要对最外面的容器设置一个溢出，隐藏 好看下效果。刷新鼠标移进去没有问题哈，这样呢，我们这个跑马灯效果的图片轮播呢就做好了。再来看一下这个通过选项卡来切换图片的图片轮播应该怎么做， 看一下代码 h t m l 结构，在刚才的基础上增加了几个单选框， 用来做选项卡那几个小圆点的。第一个是默认选中基本的样式刚才都写过了，其他样式我们重新来写。来看一下现在的布局，现在是有三张图片在这里的哈，其中有两张呢，被一处隐藏掉了，三个单选框按钮呢，在上面这里我们给他排列好 这几个单选框按钮呢，稍微给它设置大一点哈， 给他十八个像素，要给他做个定位，层级呢还要高一点，给他一百 距离。底部呢，给他三十个像素，还要对外面这个容器开启一个相对定位。来看一下现在这几个单选框呢，在 在这里了，我们现在只看得到一个，是因为他们做的绝对定位重叠在一起了，我们调整一下他们的 left 值就可以了。 先来找到第一个单选框，它的 left 值呢，给它百分之二十五， 然后是第二个，因为刚好是三个单选框对吧，所以他们之间的间隔呢都是百分之二十五这样子呢，他们就刚好是可以平均分开啊，第二个就是百分之五十，第三个就是百分之七十五。 刷新现在这几个单选框的位置呢，就比较合适了，我们在想办法，当选中每一个单选框的时候，就让对应的图片给它显示出来就可以了。 这里先拿到第一个单选框哈，当它被 chat 的时候呢，我们来控制一下 container， 和刚才一样，也是控制它在 ex 轴上面呢发生平移哈，第一个单选框呢，为零就可以了，显示的就是第一张图片。接着就是第二个单选框被选中的情况， 他就要控制 contain 的往左边来移动对吧？往左边呢，负的负的多少呢？刚好就是一个 m g 的宽度对吧？就是呢，四百八。 还有第三个单选宽被选中的情况，他就控制空天的往左边来移动两个 m g 的宽度，对吧？就是呢九百六。再给空天的上面呢加一秒钟的过渡好看一下。可不可以通过这几个小点来控制图片的切换哈， 哎，没有问题，这一个选项卡效果的图片轮播呢也做好了，这两个 demo 因为没有用到 j s， 所以功能还是稍微欠缺的，如果项目简单的话还是可以用的。大家可以想一下怎么样把这两个 demo 结合起来做这么一个效果出来。 一开始呢是在进行无缝滚动的哈，我们可以把鼠标呢移进去，他就暂停播放了，并且出现了选项卡，可以通过选项卡来切换图片的显示。移出去呢，他又继续播放了，这个效果呢，也只是用到 css 就可以了。好，这个视频呢，就到这里感谢大家的收看。

五分钟教会你制作这样子的轮播图动画。好，那我们来分析一下这个动画的一个组成啊，首先呢，这动画是有五张图片，然后随着时间的推移，他会自动进行轮播，然后呢每张图片都有可能会轮到这个 c 位上面，就是他会有一个放大的效果啊， 这一个动画呢，就需要我们准备一些素材，比如说你需要准备五张图片啊，当然你也可以更多啊，但是呢，如果你这里有几十张上百张呢，可能就有点丑了啊，那建议大家就是图片不要太多啊，我这里呢给大家用五张图片作为一个示范， 我们先打开一下咱们准备的一个素材，那这里呢，我是给大家准备了五张我的偶像的素材啊，好，那第一步呢，我们先创建一个空白页，那这里呢，我采用的是一个双色拼色的一个背景啊，这个背景呢大家可以自己去调啊，为了能够 让你这一个动画能够更好的，或者说能够更规则的进行变换，那么首先呢，我们就需要去把图片规则的进行放置，那如何让这个图片放置的很规则呢？哎，这里呢教大家一个小的技巧啊。首先呢我们先插入 哎，点击一个文本框，在这里我们画一个文本框。好，然后呢我们去调整一下它的大小，那这里呢，我先按照我准备的一个大小进行调试啊，那各位同学呢，你们跟完我练习之后，你们也能有自己的一些大小尺寸啊。 好，那我们先插入一个文本框，之后我点击绘图工具，在这里呢，我把它的一个高度我改成七厘米， 宽度找鲁度展现七厘米。好，那为了我能一会好找一下这个框啊，我先把它加一个，呃，轮廓进来，这样一会我好找一点啊。 好，那这个呢，就是我第一个框啊，把它放到居中的一个位置。好，接着呢，我们 ctrl 加 c 复制粘贴一个啊，好，那第二个框呢？我们就把它小一点，比如说我这里呢，把这宽度高度都设为六。 好，然后呢我们把它放过来一点啊，这样子呢，能有一定一点，就是一张盖着另外一张的这种效果啊，成叠的这种效果。好，然后呢我们也是一样复制粘贴在这里呢，我们也放一张啊， 好，这样子移动就是两张，那大家这个位置大家可以自己调一下啊，好了，我们再来，接下来呢，我们再复制粘贴啊，再来一张，那这一张呢，我们把它调的更小一些，比如说高度和 宽度都是五厘米。好，然后呢我们也是要有点重叠的效果。好，复制粘贴这边也来一个。好嘞， 好，这样就好了，然后呢我们也可以把它稍微往里放一点啊，这样子会对称一些。好，那你确定没有问题？之后呢，我们就把这五张都选中啊，我们点击上方出现的这一个绘图工具，然后对齐这里呢，我们给他来一个垂直居中对齐一下。 好，这样就好了，然后我们点击中间这一个框，这个框是不是要在最上面，对不对？所以呢，我们点击中间这个框，然后点击绘图工具上移这里下拉点击置于顶层，然后你看左右两端的这两张图片是在最底层，是不是？好，那这时候呢，我们点击左侧这里，然后绘图 工具下移，点击的置于底层，然后右侧这个也是啊，下移置于底层，好，这样就好了，这样子呢，我们就把我们图片要放的一个框架给搭起来了，对不对？好了，接下来呢就我们只需要把图片呢放置进来就可以了，那我们来看一下图片如何放置进来哈， 首先呢，你就点击中间这里啊，然后呢我们点击插入选项卡啊，你先双击他，然后点击插入，把图片放进来也可以，那这里呢，我建议大家我们通过填充的形式把图片填充进来，可能会更好看一些。 好了，我们点击这个框，在右侧这里有一个对象属性的侧边栏，我们在这里呢选择有一个图片或纹理填充啊，然后图片填充这里，我们下拉选择本地文件，进来之后呢，我们找到零零一张图片，点击打开啊，就放进来了， 这里一定要按顺序填啊，不然到时候你可能会忘记哪张图片了。好，零零二啊，这里呢，你这个顺序一定要统一啊，就比如说我现在从中间这里是零零一，零零二，零零三，零零四，零零五，对不对？ 好了，一会呢，我下一页要按照这顺顺序轮轮播一轮，这样子呢，我的图片放置进来才能成为一定的规则啊。好，那我们继续右边这一张，好，这个零零三，对不对？好了，这里呢是零零四， 好，然后这里呢是零零五，好，这是第一页做好了，然后呢我们按照这样子的方法呢，我们再复制 一个乘用加 c， 乘用加 v， 好，这是第二页，第二页呢，我是不是要把这个图片轮到右侧来，对不对？所以呢，我右边 这里就是零零一，对吧？好，然后依次类推。好，然后这一张就是零零三， 好，这张是零零四，中间这张是零零五， 这个顺序一定不要乱哈，不然就不好看了。好，来，再来。接下来呢，还是一样啊，这是零零一那边，这一张是零零一，对吧？好，零零二，零零三， 零零四，零零五，好，再来，一共要五张哈，复制粘贴，我在这里多加一页空白页，这样子 才能看到。我们这里做的啊，一个，两个，三个四个啊，所以这一张是零零一， 好，这一张是零零二，这一张是零零三，这一张是零零四，这一张是零零五，好，然后再来， 这一张是零零一，对吧，零零二就是你这图片放置的顺序，就是你希望他变换的一个顺序啊，这里是零零四， 好，然后这一张是零零五， ok， 好，这样就好了。然后呢，我们简单放 应一下啊，来，走你，你看，我点一下鼠标，哎，你看，确实就是我们要的，你看这张图片一直往右在滚，对吧？好，再来一次， 你看现在这一张，然后你看点一下，还有滚到这里，再点一下，滚到这里，对吧？好，没问题，这样子呢，我们要的一个顺序已经做好了，然后接下来呢，我们要做一件事情，就是让它自动滚起来，是不是？好，此时呢，我就选择这五张图片 啊，把这五张幻灯片都选中，然后呢，我们点击切换，在这里呢，我们俩添加一个平滑过渡，哎，我先添加一个，我们大家再感受一下，走你， 你看啊，我点一下，哎，你看他这个，你看他就有点动画的感觉，就过渡起来，看到没有啊，那这个平滑过渡动画呢，会在最新版本的 ps 里面啊，或者说你是二零 一九版本及以上的 offic 里面也是有的啊，你看这样子呢，他过渡起来会好看一些，对不对？好，没问题。那接下来呢，我们可以拿设置一个自动切切换片的一个时间啊，比如说把这五张都选中。 好，然后呢，我来一个自动切换片的时间，比如说来个零点五秒，不要太长啊，不要等很久，走，你好，然后呢，我再放映一下，走，你好，此时我不动鼠标，大家感受一下。哎，你看是不是整个动画他就滚动起来了，对不对？ 没问题吧？啊，很好，但是呢，一会发现一个问题啊，你注意看。哎，你看结束了，有时候呢，我们整个幻灯片里面不可能只有这五张幻灯片，对不对？他可能有非常非常多的幻灯片，但是我如何让他放映的时候能够在这五张 缸里面不停的循环呢？哎，这里教大家一个办法啊，你可以这么做，我们点击放映选项卡，在这里呢，我们点击一个自定义放映，我们新建一个放映的方案。哎，之前考二级的同学，这个知识点我想起来啊，我们新建一套方案，比如说这里啊，新建一个 换，呃，轮播图，我们学知识就要把它贯通起来，不然你就不知道你学那东西有什么用，是不是？好，然后我们选中是第十五章到第十九章啊，我们选第十五，按住 shift 键，点第十九把添加过来。好，点击确定。 好。这里呢，我们已经设置一个方案叫轮播图，对不对？好，关掉，接着呢，我们再点击这里的放映设置，此时呢，我们选择这个展台自动循环放映啊，这里是个考点，是不是？ 好了，在右侧这里呢，放映幻灯片，这里我们选择自定义放映，然后选择刚刚这个方案轮播图，点击，确定。好，我们放映一下来，走，你。 好，此时呢，他就会在我们刚刚新建的这五张幻灯片为放映方案的这一套方案里面进行放映啊，别的幻灯片他就放映不到了，看到没有，他一直滚，你看他图片现在这里哈，然后你看到这里，然后接到左侧第一张，好，然后左侧第二张， 好，然后左侧正中间 c 位，按理来讲是不是要结束了？并没有，来，你看，哎，你看，他就继续在这五张幻灯片里面不停的去轮播了啊，所以这个动画做起来还是会非常非常酷炫的啊。 ok， 好，那我们就讲完了，那这里呢，我们再补充讲一点，如果你觉得这样子太生硬了啊，建议大家呢，可以把这五张幻灯片 都呃图片都选中，我们点击上方的绘图工具，在这里呢，我们俩添加一个阴影效果，哎，这样子呢，我们这的图片就会更加具有立体感啊，看起来会好看一些。 好，那我们总结一下今天这期视频，教大家的一些技巧啊。好，那此时呢，如果你要放映别的幻灯片，你就记得把这道放映的方案把它取消掉啊， 好，然后呢，你就可以正常放映了。好，我们总结一下今天这期视频呢，教大家做的是一个轮播图的动画，那么有这么五个小技巧点，第一个需要去插入我们的一些图片， 第二个呢是建立我们图片框架，那这个框架呢，我建议大家用的是文本框的形式来搭建这个框架，那第三个呢，是设置咱们幻灯片图片的一个平滑切换的方式，这样子呢，会让你两张幻灯片之间呢 切换更加具有动感啊，不至于那么的生硬。然后接着呢，我们去设置一个自动换片的时间。好，然后第五点呢，是我们为了能够让我们的幻灯片在这五张，或者说在这固定的数量这几张幻灯片当中进行循环的放映，那么呢，我们采取的方案呢，是设置一个自定义放映的方案， 我们第一步呢，先设置一次定义放映的方案，然后第二步呢，在放映设置这里我们设置的一个展台自动循环播放，然后选了一下刚刚这个设置的方案就可以了。啊， 那这期视频呢，涉及到知识点成为稍微多一些，但操作起来并没有难度啊，所以希望各位同学呢，一定要跟着我们这期视频好好的练过一次，你对于整个幻灯片的理解一定会有更深层次的理解，并且呢对于我们幻灯片当中的一些功能，你一定会有所收获的。 好，那以上呢，就这期视频的全部内容了，非常感谢各位同学的收看，我是大头朱德同学，学习顺利，天天开心，我们下个视频再见。拜拜。

啊，来吧，用原声的 gs 给大家写个轮播图助助信。呃，我尽量的使用一页十五版本以下的代码来进行书写啊，方便呢，大部分同学能够看得懂，但是呢也不排除有的时候呢，我忍不住会使用到一页十六啊。呃，时间有限，不能像正常上课那样子摊开来讲啊，我就用几分钟的时间把它写出来 啊，关键点呢给大家讲一下。有这么个意思啊，能够体会到我整个的思路就可以了。呃，我们的轮模组的效果呢，就这样了啊，就这个效果非常的简单。然后呢我们目前的效果呢，当然是一片空白。首先呢我来书写这个 at 半代码，开局呢就是一个 div， 就这个容器把整个轮波图这个区域呢给它包住。这个 dna 里边有啥呢？里边又是一个 dna， 这个 dna 呢是走马灯，也就是说我们整个的图片都全部放在这里边， 那么里边放茶呢？具体怎么放呢？里边又是几个 div 啊？两个，三个，四个都无所谓啊，我们这里呢有四张图片就放四个 div 啊，给他调这样式排成四个。那么每一个 div 里边呢是一个 a 元素啊， a 元素 这边一张图片啊，就这么简单好就生存出来了啊，你看这个区域呢，就有四个这么一个 dav， 每个 dav 里边一个 a 元素有一个图片好，整个走马灯区域呢就结束了。然后就是指示器这个区域， 指示器这个区域呢里边就是一个绝对定位的啊，一会呢我们来写样式，现在给他取个的样式叫英迪 k 特啊，表示指示器里边呢三个四个无所谓，你图片有几张就写几个指示器，那么每个指示器呢，我可以用的实干元素啊，乘以四 哦，其中一个示范元素呢，会有一个特别的样式啊，这个大家都懂，能摸图里边是不是有个选中的效果对吧？一个指示他是选中的，所以说给他写个特殊的样式啊，比方说 x 好，整个的 at 们呢就写完了，接下来呢就是 css 的啊啊， css 里边呢，首先是写一个基础代版啊，这个玩法也没什么好解释的啊，每个页面都要写的啊，完活之后呢，就是整个容器，整个容器有什么样的样式呢？我给他写一个啊，写个宽高宽五百啊，高中了三百。然后呢把它居中，把毛紧十个像素 啊，目前呢看上去还有点怪啊，是因为它里边的图片比较大啊，我把里边的图片呢也设置为这个尺寸吧，太哇塞了。里边的图片啊，这图片一变小吧，就看上去像那么回事了啊。不过呢，目前的图片呢是纵向排列的啊，不着急，我们写完了整个的外层区域之后呢，然后是走马灯这个区域，走马灯这个区域呢，它的宽高要跟复元数保持一致。 然后呢，由于他走马灯这个区里边啊，不是有三个 div 吗？这三个 div 要横向排列对吧，那我就用个弹性盒呗，哎，用了弹性盒之后呢，是不是就横向排列了 是吧，没问题了吧，然后我只需要去设置一下复原数啊，就顶层的康天纳给他设置一个 oppo float， 这其他图片就看不见了，只显示了一张图片了，并不复杂啊，其实很简单的啊，然后就是这个指示器这个区域，指示器这个区域呢是英迪 k 特， 整个区域呢是一个绝对定位。那么按照直觉富香那复元数这个康天那不得相对定位吗？是吧，这个都是基础科里边学过的。然后绝对定位的位置呢？首先你 给他随便来一个吧，十倍像素啊，看上去呢，目前看不到任何的效果，是因为这个元素呢，它的高度为零，宽度呢也是为零，为什么它里边没东西啊？里边只有三个空白的十倍元素啊，四个空白的十倍元素没东西。那么我来设置一下它里边的十倍元素的尺寸以及呢它的十倍元素的布局。 一个石斑元素是个小圈圈，而且呢是横向排列。那不用说了，那针对这个石斑元素的布局呢，我就可以使用弹性和布局啊，然后针对每一个石斑元素呢，再去设置一下。好吧，放这来吧， 里边一个失败，每个失败呢设置一个宽高，宽度呢为二十个像素啊，高度呢？二十个像素，然后设置一个波点吧， 模特的话哈，两个像素十二列的，呃，颜色就是 ac， 看到没？这个四边元素在哪呢？在这看吧在这。然后呢我们需要设置一下这四边元素的，把它变成个圆圈啊，保证 radios 百分之五十变圆圈。变圆圈之后呢，我们来设置一下他左右的间距吧，上下为零，左右为三个像素。然后我们把整个这个英迪 k 头啊，整个这个 不知道你们看的清楚了，我给他加上一个奥斯内啊，一个相处手里的一个白色的边框。好，你看整个一个区域呢，把它放到正中间，怎么放呢？就是 next 百分之五十呗，然后再向左移动自身宽度的一半，你可以使用 cs 三的移动方式啊，全是 maxx， 负的百分之五十， 时间有限，好，没办法摊开来讲，但是呢，你把它剧终就完事了啊，不管你用什么方式啊，然后把这个边框给它去掉啊，好，指示器这一块布局就完事了。其中有一个指示器呢，它有个特殊的样式啊，就针对有一个特殊样式的实验。 x 不是有一个失败元素，他是那样是 vip 吗？表示目前选中的效果，对吧？你只需要把他的背景颜色改为白色，然后呢把边框的颜色也改为白色，完事， 这个布局就完事了啊。哎，到时候我们怎么样让这个轮毂图来滚来滚去呢？非常简单啊，我们打开浏览器的调试工具，我们只需要找到这个走马灯这个区域，然后呢去控制他的横向 偏移就行了啊，你可以用 march next， 也可以使用 cs 三的，全是 boss 啊，全是 nice x 啊，来进行横向偏移。 横向偏移的时候呢，我们这里可以写百分比啊，比方说写零的话，就是第一张，负的百分之一百的话，就是第二张，对吧？看到第二张了，负了百分之两百的话，就第三张，第四张，对吧？啊，通过他来进行偏移，但是在偏移的过程中呢，是没有动画的啊，他是瞬间偏移过去的， 那么我们如何来实现动画呢？就可以使用 c 三的一个属性啊，叫做 tc 性，我们找到这个走马灯这个区域啊，给他加上一个踹 c 性， 给他写个零点五吧，零点五秒钟，然而他们意思呢？表示说我们这个区域的 css 属性变化，他会在零点五秒钟之内完成，而不是瞬间完成。 好，那么现在我们再来看一下啊，变化，变化对吧？ cs 属性的变化在零点五秒内完成，他是慢慢变过去的。好，这样就实现了动画效果啊，至此呢，整个的布局就完事了啊， at 全部完事，接下来就是结实了，首先呢，你就必须要获取关键性的动物元素，哪些动物元素要获取呢？肯定要获取他，为什么呢？因为以后我要改变他的横向位置，对吧？我可以定一个对象，这个对象里面包含所有我需要的动物元素啊，其中一个呢，就是这个 carrier c， 然后呢，再去拿到下边的指示器， 拿到这些东西之后呢，我们现在要需要去写这么一个函数啊，叫做方向啊，木兔给他传一个参数啊，叫阴代的事，这个函数表示什么意思呢？他表示说移动轮播图到第几个板块，就这么个意思， 然后你传一个零，就表示移动的木头到第一个板块，传一个一就表示移动的木头到第二个板块啊，那么这个音这个词呢，就表示反块的缩影。好，那么这个函数完成之后啊，就非常方便了后续操作。那么我们来写一下这个函数，这个函数怎么来书写呢？首先我就要去设置动词里边一个开始 是不是设置了走马灯这个区域，对吧？看一下这张图啊，这个橘色的走马灯的区域横向的偏移，对不对？第一张轮播出的偏移呢？我们怎么来设置呢？ 第一张图的话就是零，对吧？也可以把它写为负的百分之零啊，这样子写不是一样的吗？啊，为了统一嘛，第二张图呢就这里写一，第三张图呢就写二，第四张图呢就写三，你说变化了是不是就这个位置，对吧？我们把这个位置呢拼接一下，这就完事了吗？ 就可以了啊，这是个支付串拼接，用的是 es 六的模板支付串啊，利用普通的支付串拼接也是可以的啊，再随时啊，时间有限啊，我不能摊开讲了。好，咱们来试一下吧，就一句带吗？能不能实现一些效果啊？ 到第二张去不就过去了吗？到第三张去不就过去了吗？到第四张去，然后回到第一张，是吧？然后除此之外就没了吗？其实还有些东西啊，因为这个指示期能是没有变化的，我们再试一下吧，比方说我们再来跑到第二张 o two， 你看，虽然图片 变过去了，但是这个指示器是没有变过去的，所以说我们这里还要控制一下这个指示器。这个指示器呢，分成两步啊，首先呢去除当前选中的指示器， 然后第二步呢，重新设置要选中的指示器。啥意思呢？就比方说我要切到第二张，分成两步，首先把第一张那个指示器不选选中的效果给它去掉，然后呢再把第二张的选中效果给它加上啊，就是每个过程好，第一步很简单啊，我们拿到当前选中的指示器就完事了， 对吧？就找到这个指示器了，然后呢，把它的内样式克拉斯列式这里边给它去除掉这个 iq 屏幕啊，那么这样去除的效果就实现了，咱们来试一下啊，木头，第二张是不是第一个就去掉了，然后呢再把该选中的加上哪一个指示器要该选中呢？ 是不是这个指示器用这个下标去取，对吧？我们的所有指示器在哪？在这个书轴里边，所以说我们找到这个多么死，好，我们再试一下 啊，第二张去，哎，一切都正常了，看到没？第三张去回到第一张，是不是一切都正常了？好，最后呢，我们再去注册一个事件，找到我们的所有的指示器，然后呢去循环他对每一个指示器啊，去注册一个昂克力的事件， 当每一个指示器点击的时候干嘛呀？我不会就是调那个不误处，对吧？这指示器所在的下标就是我要到这个板块的下标啊，就写完了呀， 同学啊，就写完了。再说一个简易的文波图呢，其实要不了几行代码啊，非常非常的简单。最后呢给大家留一个思考题，就是我现在没有去做自动切换，如果说要做自动切换的话，该怎么去做？其实代码都写到这份了，做自动切换并不复杂吧。

本期给大家带来使用 css 三写图片轮播效果。第一步，写好图片滚动的布局，因为跑完图片后会有一个立马跳转到第一张图会有点不和谐，所以这边最后一张图设置的和第一张图一样。 第二步，开始写 css 样式设置 overflow headan 一出隐藏，让不在 div 的图片先隐藏 此宽度为图片的宽度乘图片的数量设置动画， 设置图片的宽度和高度和外层 div 一样的宽高配置动画，这里可以根据自己的需求去调试，每个百分比间隔自己可以去控制。 最后让我们试试看洗好的效果如何，这里也可以根据自己需求来更改样式。 oh my god wow！

来来来，老板又有新需求了，当我点击这个按钮的时候，我这呢会变成一个张开口的一个效果，老板只要给钱，咱们就应该做。不会啊，他的思路呢，我们可以这么来做，打开我们的 vscod， 现在是两个小力，是不是两个红色的圆就出来了这么一个张口的效果啊？其实啊，我们在力里面又放了 两个小的盒子，一个我们叫 b for， 一个叫 after， 这个呢是我们的 b for， 盒子下面还有一个 after， 正好把我们这个红色的圆这个填充上呀，那我只需要让这 b for after 做个动画效果，就不可以实现这个效果了。 好，我给你贴到一边去。在这里面可以做一个鼠辈经过之后的比方呢，定位宽是一百六，高是八十，可以做一个五行呀，给他一个圆角就行了。背景色我可以是这么一个蓝色，你看，当我鼠辈一经过的时候，蓝色的这个呢就是比方盒子了，我们再定一个 after， 定到我们的下面来。现在呢，我要做动画了，上面这个盒子鼠辈一经过往上面走是不是 四十五度就可以了？那下面这盒子呢，是往下面走四十五度，当鼠标一经过之后呢，来做一个动画效果，就叫做 easy， 哈哈， atky frames 定义了小的动画，当我鼠标一经过数，分别调用这个动画就可以了。这个 b fop 我们定义的是一个 up， 而 after 呢，我们定义的是 down， 所以你看我手没经过有没有效果。那只不过咱们把所有的颜色换成一个白色。那接下来我们把它运用到我们的轮播图里面，我们前面已经做过的一个轮播图，它的结构呢？还是每一个小圆点里面放一个笔报？ 然后呢，我们鼠标经过力啊，就可以自动调用这个力，采取我们刚才写的这两个代码就行了。点击完，点击完这个效果是不是能看到了？但是呢，还有一个你没想到的效果，当我点了左箭头， 发现了什么反过方向来吃的，对不对啊？所以说当我们点了左箭头的时候呢，再加一句话，我们写了一个 reverse， 把它们反过来了， b for 呢，改 成了当原来的时候这么来走啊，现在呢，我加一个反转的一个类呢，让他这样来，我的 gs 是这么来写的。当我们加加的时候呢，我们正常调用我们这个 active， 这个类是不是这样的一个效果？ 但是呢，当我点击了是我按钮的时候，剪剪的时候呢，添加了一个 rewards 这个类，让他类反方向就可以实现了，现在老板给我们的钱是我没有白花。

图片轮播的动画效果，今天给大家分享一个非常简单的制作方法，动画的效果基本上一键搞定。我们以这两张图片为例，两张图片分别放到两个页面， 把第一个页面的图片先复制一张，右键设置图片格式，在艺术效果中选择虚化，虚化半径调整为三十，将虚化后的图片设置为幻灯片的背景， 将前面这张图片缩小，放到页面相应的位置，右边的部分可以添加文字， 然后右键设置这张图片，添加一个阴影，目的是让他看起来更明显一些，颜色可以选择白色，调整一下他的透明度和模糊。第二张图片 处理方式是一模一样的，也将他虚化，虚化半径三十左右设置为背景前面这张图片，把它缩小，也给他一个阴影效果。 下面关键步骤来了，在所有图，我们给第二张幻灯片，在上方工具栏切换中找到动态内容，分类，选择旋转更多的图片，只需要重复上面的操作就可以了。感谢大家，我们下期见！

哈喽，大家好，这里是尚未兔兔的蛇叔，今天给大家分享一期用 j s 手写轮播图的案例，话不多说，我们现在打开代码去实现， 哎，我们打开用的编辑器 west coat， 然后把项目把样式给他写出来，最后一个外层的 spider， 内层一个 fire fiber rapper 吧，然后里面就我这里准备了有四张图片，我们可以把图片给他放进去， 就一，然后它的样式不统一为 spider item， 我们就用四个，就用四张图片来演示一下吧， 然后基本的结构已经写好了，那我们就把它的样子给写出来， 然后把波德的钥匙给他清一下，清一下，为了好看一点，那就把轮波给他放到水平居中吧，水平居中 剪的好看一点，然后我们把 sniper 的样式 也可以写一下，宽度我们就给他一个三百 kis， 高度就给他一个两百 kis， 嗯，内容的话就 model， 嗯， a b o 吧。那我们就写一下内内层的内层一个样式， 他的宽度的话就因为我们有呃四张图片，四张图片每张，呃，因为总共外面是三百 px， 但是我们需要滚动的话，那就需要三百去乘四，就是一千二百 px， 我高度他就继承不累的好了， ok， 呃，里面内存的我们也给大家写一下 哦。这里是这里也用到 fresh 布局，让它在水平里面横排，因为这里它会一张一张的往下面叠，那我们是想它是轮播，是从水平的，就我们就把它在这里内层的加一个 fresh 布局， 然后宽度的话也是三百倍，是占满外部的整一个宽度的高度，我们就拿呃负累的高度就好了，百分之百颜色，我们给他随便整一个吧，然后 字体颜色是随便的，就白色吧，然后好区分。哦哦，这里不需要加颜色，因为我们这本身这张是一张图片来的，我们就不需要颜色了。 ok， 我们就大概样式就写到 这里，你可以看一下效果，大家看一下效果， 这就是效果了啊，可以滚动的，这样滚动的话并不符合我们就是文波的要求啊，但是你也可以看到他是每张图片是可以滚动过去的，但是我们只需要 在呃这个区域里面，这这块三百倍时区域里面滚动，我们就需要在外场这个 survivor 里面加个 overfro， 差一点看一下效果， ok 就没办法滚动了。 重新重新打开一下，重新打开一下都没有哦，你看这里就滚动不了了，但是我， 我们怎么去滚动？呃，上一下一张图片的，就我们需要做到一个，嗯，结实去控制那个。呃， spiver， 火风火风，区分一下。 呃，在这里给大家加个 id， 懒得写数组了，因为我们用获取那个 document 点个 cash 名的话，他是需要呃获取地点的数组写的不要不好看，我们就使用获取 id 的方式，就这样就好了。 然后我们给 the fiber 这里添加一个触摸开始的事件， deal touch， deal usage task 吧， 然后里面接收一个一个函数，我们可以打印一下。呃，移动开始，这是 呃滑动开始发起的一个鉴定，然后我们就还有开始，有开始就有过程，有过程就有结束，就我们先把这三个都给他写写出来，先滑动中， 滑动中，然后滑动结束。 嗯，这里也改一下 touch， 这里是 touch woof， 这里是 touch。 嗯，就可以看一下，看一下控制台打印的一个效果。 ok， 可以看到了，这里我们滑动的时候就是呃开始，然后慢慢滑滑滑滑，你看移动中 手呃，鼠标一放开，移动结束，这是监听他一个整一个滚动了，那我们怎么去通过这样滑，然后移动到下一张呢？我们就需要拿到他一个这个参数哦，把他也给打印一下，他这个一是什么？ 可以打印下这个第一个可以看一下，一滑动，你看滑动开始，我们只需要拿到呃这个 target touch 里面的零个速度，里面一个 page x 和 看 s 都可以的，我们就随便拿一个，拿一个 target 文的呃，定一个 star 木吧， star 木等于这个一点 target d 零的数字， 点 page is page is 吧，就我们就标记一个长方式，对的，我们就是把它这个给定义在外面吧，因为后面还可能会有用到。 然后这里移动中移动是我们需要一个计算，我们需要计算一个距离的。计算距离，计算距离怎么去做呢？ 就是把这里，把这里滑动的时候这一段距离减去，开始的就是他移动的距离了， 因为是用坐标的嘛，把移动移动的 s 坐标坐标减去，那个开始的 s 坐标就是移动的距离了，就是一个。呜 discount 吧，等于一个 target is 减去沙漠，沙漠这个就是它的移动距离了。那我们去呃，怎么去给它改变呢？ 就是要拿到这个 spiral wrapper 里面的点 spy 哦，呃，就是 是，我们在我看一下这里吧，那我也忘记了，他说全是泪，全是泪，等下全是泪， s 就移动这一个就是改变他这个是 ss 的就可以了。 ok， 我们去了 改变这个，但是我们肯定是不是固定的会计算的，我们移动的最最终需要移动的位置是什么计算呢？就是在一个目等于， 哦，其实应该是要记住，因为我们是后面是，假如我第一次开始移动到这里的位置的话，我之前是没有移动过的，那我下一张呢？我下移动完之后停留的位置 就是在，呃，从从这个点，从这点到这个点就移动到这个位置，但是我下一次呢？下一次我要去，我要去记录上一次移动的位置，然后再去相加，所以我们就是需要 记录一下，来一个，呃，这里来一个 last 上一次的，呃，这里是上一次的 移动位置，然后的一个木美丽，这里是需要移动的，去需要 需要移动的距离。 move， 把这里 ins 也写写上去吧，写在外面吧。 off insta 就是这个就是移动的距离， 我们还是要标记上，标记一下一开始的标记是否开始移动过一个 is 木 boss， ok， 我们这可以计算的， 那我们因为移动开始的时候 last last move， last move 要等于要复制一下，就是就是假如移动过了，上一次的移动的距离，就会需要复制到这个 last move 里面， 这里我们就是木，就需要去一个计算了。如果我们是，如果我们开始移动过了，所以我们上一秒他是一木，如果他是处的话，就需要拉丝木加上移动的距离，否则就直接是移动距离就可以了。 然后我们这里目，这里就是动态的，给他一个这么不错 case k， 我们这里就可以看一下效果是否达到 我们想要的。 ok， 你看到下一张图片结束了，我要我再移动，就要下一张图片了，是可以一直移动下去的，可以一直移动下去的，但是有一个问题了， 当我这里重新再点的时候，再点的时候又回到原来位置了。那需要怎么做呢？下堂课同学可以，下课后同学可以思考一下，看一下我们应该是怎么去处理这个问题。那今天这堂课就到现在了，下次见。