四件套轮播图制作步骤详解

好，这个呢是一个四分屏的视频，四分屏的话它是以一个主视频下面有三个画中画的这样的形式的出现。 好，我们来制作第一个画面播放后面的三个画面要是一个定格的一个状态，我们找到第一个画面就是这个画面，这个呢是第一个画面，我们找到第一个画面，拖到最后面 再给他定格出来一张图片。好，我们其他的三个视频的话，我们要把前面的一张画面给他定格出来一张图 图片， 然后我们定格出来的前面的这三张图片，我们要拖到和第一个画面就是第一个播放的视频一样长 这样呢，就是第一个画面播放，其他三个画面都是定格的状态。好，第一个画面播放完了之后，我们再来播放第二个画面，第二个画面的话是这个打伞的，打伞的话我们找到他。好，找到打伞的了之后，我们 拖到这个视频的最后面一帧画面，满最后一帧画面给他定格出来一张图片，其他三个画面的话，我们是一个定格的状态，所以我们找到 第三个画面就是主视频的这个画面，因为前面呢，我们已经定格出来一张图片了，所以我们继续拉长这张定格的图片，一直拉长到 第二个视频画面播放完了为止，就可以我们和这个第二个视频画面播放完了这个位置给他对齐。好，第四个画面，同样的， 因为第四个画面呢，我们前面也定格出来的了一张图片，所以呢我继续拉长它。 好，我们继续拉长到第二个视频画面结束了为止， 因为画中画呢，他不和主视频一样，主视频的话，你们前面这段这段画面你可以随意的拉长，但是画中画的话，我们可以看到，如果说你的后面这一段画中画不动他的话，他是不可以拉长的，所以呢，我们要拖动后面这一段画中画， 给他拖出来一个空隙，前面的这一段呢，他才可以拉长。然后第一个画面呢，因为他播放完了之后，后面的话他就不需要他播放了，所以说第一个画面我们继续把这个图片继续拉长就可以了，然后我们适当的拉长一点，后面我们再调节 好，我们找到第二个画面播放完了的地方。 好，这里第二个画面播放完了，我们再播放第三个画面。好，我们再找到第三个画面， 点击一次下，他拖到最后一针画面的位置，给他定格出来一张图片。好，其他的三个画面，我们找到第四个画面，第四个画面的话，我们继续拉长前面定格的图片，我们要把这个视频给他 和主视频的这个定格出来的图片，也就是最后一段给他对齐，前面的话我们继续给他拉长好。这样的第三个画面播放完了之后呢，就剩最后一个画面了吗？也 就是到结尾的地方了，所以我们把所有的这个视频，所有轨道的视频全部和第四个画面播放完成的这个位置给他对齐，全部拉长，他。 好，这样一个四分频轮翻播放的效果就出来了，我们看一下。

大家好，这个视频来做一个无缝滚动的图片轮播。先来看一下完成之后的效果，首先在浏览器上面呢，有四张照片从左往右移动，并且是循环播放的，如果我们希望轮播可以暂停下来呢，很简单，只要把鼠标移动到图片上面就可以暂停了。 这个时候我们把鼠标移动到图片靠左边一点的位置，哎，他出现一个向左的按钮，移动到右边呢，他出现一个向右的按钮，在中间是没有的，这两个按钮呢主要是用来切换这个轮拨的方向的。 好，我们先来思考一下整一个思路，这个呆萌的重点呢，主要就是怎么样让图片可以无缝滚动起来，因为我们只有四张照片往一个方向轮播，当播放到最后一张照片的时候，第一张照片他是怎么样做到很平顺的衔接过来的， 还有怎么样控制这两个按钮哈，只有鼠标在靠左还有靠右的这两个区域才会显示出来，这个区域又是怎么样计算出来的？ 这个呆萌我将会分为两个视频来跟大家讲解。第一个视频主要来说一下布局，通过 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 把无缝滚动的轮播效果呢给他做出来。好，这个视频呢就先到这里，感谢大家的收看。

这种高级的图片轮播动画看起来有新意，做起来简单快点赞！今天教你让 ppt 里的图片火起来！首先我们新建一页幻灯片， 在插入选项卡下选择形状，插入一个圆角矩形，拖住黄点，调整角弧度。调整好位置，将矩形居中。 右击矩形，点击设置对象格式，在效果选项中调整倒影大小百分之十五，透明度百分之二十五，蘑菇二十磅，距离五磅。点击复制一个矩形，调整到比原矩形小一些，放在一侧，再复制一个放在另一侧。 接下来我们复制矩形，用同样的方式调整更小的矩形，放在两侧。选中两个中矩形，右击置于底层。 再选中两个最小的矩形，右击置于底层。全选所有矩形 填充与线条，线条设置为无线条，在页面上加上你想展示的文字，让 ppt 内容更加丰富。下面我们选中这页幻灯片， ctrl 加 c， ctrl 加 v， 复制四张。 点击第一张幻灯片， ctrl 加 c， 复制图片，切换到第二张幻灯片。选中幻灯片的大矩形，右击选择设置对象格式，形状选项，设置图片或纹理填充。点击剪切版， 在第二页幻灯片，选择左边的矩形，填充同样的照片。在后面的几张幻灯片中，我们按顺时针方向同样的方式进行图片填充。接下来我们开始 第二张图片的填充。复制图片，在第二张幻灯片中，逆时针方向将图片复制在上一张图片后，后面几张幻灯片则按照顺时针方向填充第二张图片 后面的几张图片，以此类推进行填充。填充的规律我们可以理解为同一页幻灯片内不同图片逆时针方向进行填充，而同一张图片在不同页的幻灯片中顺时针方向进行填充，这样理解是不是简单多了？ 图片填充好之后，我们按住 ctrl， 选中后面四张幻灯片，再切换选项卡，选择平滑效果， 最后按住 ctrl 键，选择这五张幻灯片，在切换选项卡下点击勾选自动幻片，这样高级的图片轮播效果就出来了，你学会了吗？

像这样的图片轮播效果如何？制作一个方法教会你，视频有点长，建议点赞收藏慢慢看。第一步，海报设计 尺寸幺九二零乘以九百上速，这里的高度建议在七百上速以上，看起来比较大气，版型内容在九百五到一千二之间。第二步，上传海报，打开图片空间，点击上传。 第三步，代码生成，打开搞定设计，选择轮播工具， 在右侧图片设置里面，我们可以更换自己的图片和跳转链接，打开素材中心，复制图片地址，删除原来的图片地址进行粘贴。 跳转链接一般都是我们的宝贝链接，复制我们宝贝地址进行粘贴图片设置右边有一个动效设置，这边可以选择自己想要的方式进行设置，一般默认即可。然后我们生成代码， 这边我们是淘宝，就选择淘宝，点击复制代码。第四步，模块安装，打开装修后台，添加一个自定义区域，到店招下方，点击编辑标题，选择不显示， 点击圆码粘贴代码，再次点击圆码，点击确定发布，看效果。第五步，查看效， 发布完了之后，我们检查一下轮波效果，看一下轮波是否正常，跳转是否正常。 ok， 这边完全没有任何问题，那么下节课我们来讲一下这里的间隙如何去除。好了，本期内容就到这里，我们下期再见。

在小程序中如何制作轮播图？三个步骤教会你。第一步，创建一个拥有图片素材的数据表，点击界面左上角的数据模型，点击添加。创建一个名称为轮播图的数据表， 点击确认。选中刚刚创建的数据表，点击加号，输入轮播的图片字段类型呢？选择图片类型， 点击确认。如果你想轮播的是文字内容，那自然是要添加一个文字类型的字段了。 完成数据模型的创建后，点击后端更新，后端更新完毕之后，选择数据库，在这里选中刚刚的轮播图，添加我们的图片 以及文字素材。 ok， 添加完毕了。现在我们回到页面，我们要完成第二件事情，在页面中搭建一个轮播区域，如何搭建呢？首先双击进入聚焦模式， 在组件库中找到横向列表组件，作为打底，我们给横向列表组件进行一个位置及大小的修改。 双击进入聚焦模式， 找到图片组件，添加进去。 同样的，如果你想轮拨文字，那就添加文字组件，适当修改一下样式。 好，现在我们进入第三步了，把数据和组件进行绑定，选中横向列表组件，先给他进行绑定数据，绑定远程数据，找到轮播图。接着双击横向列表组件，选中图片组件，给图片组件绑定上图片素材， 找到组建内数据，找到横向列表 item， 轮播的图片，即可完成图片的绑定了，点击 预览，查看一下效果吧。 ok， 我们图片已经上去了，那我们要绑定文字组件也是一样的道理。找到组件的数据，横向列表 item， 选择商品名称，刷新一下，效果也预览出来了， 可是我们发现个问题，我们的轮播图并没有动起来，怎么办呢？来到页面一找到交互，点击开启分页，自动播放，点击循环。如果我们想要有指示点，那就点点击指示器。 当然，我们也可以给指示器适当换个颜色，比如我把默认的颜色修改成白色，把选中的颜色修改成橙色，刷新一下， 效果立竿见影，我们的轮播图就已经完成了。当然，如果你想学习制作其他内容，记得在评论区留言哦！

参考了拼多多大部分类目 top 商家的轮播图的布局，发现这样的布局轮播图啊，不仅能够拿到推荐流量，还能提出转化率。那怎么去布局轮播图能够拿到二次推荐流量呢？还能够去提升我的转化？首先啊，前一到五张图，放产品的卖点图。 第一张啊，放点击率最高的图。第二到第五张啊，放点击率相对差点图。这几张图啊，主要以产品的卖点，放大产品的优势为主。 第六张呢，放咱们的产品细节图，产品细节要放大，打消消费者的疑虑。第七张，放产品的对比图。第八张，放产品的展现产品的图片。第九张呢，放产品的背书图。第十张呢，放咱们的产品的白底图， 本身白底球的作用啊，就是方便系统抓取去推送推荐容量。那轮播图再放一张白底图，可以增加我的二次推荐容量。关注我，分享更多运营干货！

这个视频带大家来做这么一个无缝连接的图片轮播的效果，我们来看一下我们要实现的功能有哪些。 首先我们这个图片轮播呢，它里面有五张照片不断的在循环播放，当我们一打开页面的时候呢，照片它是从右向左滑动的，当我们把我们的这个鼠标移进去图片里面的时候呢，它就会停止滑动， 再把鼠标移出来呢，他又会继续滑动了。还有呢就是下面这两个按钮，我们图片一开始呢，他是从右向左滑动的， 如果说我们想让他切换一下方向，我们可以点击一下这个向右走的按钮，他就会向右边滑动，再点击一下向左走呢，他又会往左边移动了。 这个效果里面呢，它涉及到我们 htmlcss 和扎巴斯克哈，不过呢也是比较简单和基础的，我们就来看一下具体是怎么实现的。 这边我们把代码放大一点，这里的话已经写了一个基础的一个 div， 这个 div 的话就是放我们图片轮播的， 然后呢这个 ul 就是放我们轮播的这些图片，下面这个 div 的话放的是我们两个按钮，现在先看一下他长什么样子啊，现在应该是很丑的，哎，就这么一个样子。 然后呢我们要把这边啊这一堆图片，首先把它的样式布局呢，先做成这么一个布局，我们来斜下它的一个 css， 我们现在就来 写一下 css， 先控制一下系统的一些内外编剧的话，先把它全部给清零哈。 然后我们先做 ul 里面的内容啊，先写这个 img， 从里面往外面写出来哈， 我们就直接啊直接写 i m g 吧，简单一点， i m g 的话，这个图片的话我们控制一下它的宽度和高度的话都是个三百像素， 三百限速的话，我们现在到浏览器看一下，现在刷新的话啊，他们的大小呢，就统一为一个三百乘三百了，因为他们本来就是一比一的啊。接着写一下这个力的样式，力的快， 温度的话给他一个三百啊，也是三百，和照片的一样，然后我们清除一下这个小点的样式，给他扔掉， 然后我们让这些照片呢，让他横着排列起来，再让这些照片的话给他一个 拍点，拍点 light， 让这些照片的话就有一定的间距哈，他的间距的话给一个二十个像素。现在我们到浏览器去刷新呢，他就应该横着排列，然后之间的话有个二十个像素的一个间距了。再接着来写写一下这个 ul， ul 的话我们给他一个宽度，宽度应该是多少呢？我们一共有五张照片，照片的话我们给他的宽度是三百个像素，然后每张照片之间呢，还有二十个像素的 一个啊，间距五张照片就是三百二十乘以五，就一共的话是一千六百个像素，然后高度就和我们照片的高度一样，也是三百像素。写完这个 ul 呢，再接着写外面的这个大盒子的样式哈， 整个大盒子他的宽度也一样，也是个一千六百，但是高度的话我们给高一点，高一点的话等一下放这两个按钮的，这里的话就给个四百啊，多给个一百个像素。 现在我们再到浏览器看，其实是一样的啊，没有没有区别，我们还要给他们做一下定位，这个定位的话我们给这个大盒子给他来一个相对定位，然后呢这个 ul 就相对他来做一个绝对定位啊，现在呢是看不出效果的，等一下我们通过 js 来控制的话，这里的话就用的上，就控制他滑动的话就是改变他们的一个位置的，这里的一个 left 的话先给他一个零，给一个零，这里还要做一个 ofloven 益处隐藏掉。现在的话是看起来是没有任何区别的，但是呢，等一下我们做这个用 gs 控制他们滑动的时候呢，就会看看出来效果了， 现在这两个按钮呢，他就不见了，不知道跑哪里去了。我们现在就通过样式来写一下，控制一下他们这两个按钮，他的一个盒子呢是这个 bu 啊，我们就通过这个 bu 来拿到他这个 bu， 这个盒子，我们给他一个四百个像素的宽度，宽度 是四百，然后因为他的大盒子这个 com 这个盒子呢，他做了一个相对定位，这样子的话我们就可以相对他来做一个绝对定位，来控制一下他的位置，然后控制他一个底部哈，一个包臀，包臀的话给他一个二十个像素。 现在的话我们可以先看一下，现在我们一刷新啊，哎，这两个按钮跑到这里来了，这里的话肯定是有问题的话，这两个按钮不可能出现在这里的，我们检查一下代码， 我们看一下，哎，疏忽大意了，这个空这个 id 选择器，我们竟然漏了一个井号，对吧？我们现在再刷新，再去看一下，现在我们再刷新的话，这两个按钮呢，他就已经出现在他的下方了，现在呢，就 是正常的。这里呢，还要让这两个按钮啊，放在我们图片轮播靠中间的一个位置，就好像我们做好的效果一样，放在这个图片轮播差不多是正下方这里哈， 然后我们来学一下我们之前学过这个水平居中的这个基础知识的话，应该知道，因为这里已经是用这个定位来做了，我们就可以给他一个 left 值，这个 left 值给多少呢啊？就是一个百分之五十， 百分之五十的一个 life 值，但是还不足以让他水平剧终哈，这里的话还要让他回退他自身宽度的一半， 这里就给他一个 transform translate translate x， 让他付百分之五十，就是往左边走他自身宽度的一半这里呢？我们再刷新看一下效果，这里呢？我们一刷， 哎，大家好像发现他并没有水平居中，对吧？这个时候我们打开控制台来看一下啊，其实这个 div 看到没有，这个 bu， 因为我们给他一个宽度是四百，大家看到这里出现遮罩的这个部分的话，他其实已经是在这个图片轮播 一个正中间啊，下方正中间的这么一个位置了。我们现在的话就调整一下这两个按钮，在这个 bu 这个 div 里面啊，在它里面的一个位置，那就可以了，现在就来写一下这两个按钮的样式，这两个按钮的话，他的 clus 也是这个 bu， 我们就拿到这个 bu 这两个按钮，然后给他一个高度，高度的话三十五个像素吧，宽度的话给他一个八十个像素，我们再做一下慢点啊，可以控制一下他们水平，水 屏的位置哈，上下为零左右的话给他一个五十个像素，现在的话我们再来刷新呢，哎，发现的话，他就他的位置就差不多就正中了哈。最后呢我们再把整个图片轮播放在我们窗口的正中间的位置呢，那我们这个布局就算结束了， 这里我拿到这个波底来做 玻璃的话，给他一个百分之一百的四口高度哈，百分之一百的四口高度，然后让他 display 为一个弹性盒， 用这个弹性盒子来控制一下里面的内容，水平和垂直都是居中的，再来一个侧轴的，也是一个 stand， 然后我们再来刷新，哎，他就放在我们 四口的正中间的这么一个位置了。好，那布局这一部分的话就写到这里，布局的话简单一点，就没有写的很精美的那种感觉。我们主要来看动画这一块，我们用 js 是怎么实现的，这里就来分析一下我们这个图片轮播这这一块的一个思路， 这里呢我就画了这么一个图，简单的代表我们这个图片轮播这十个小块就是我们的照片，我们通过 js 的话，首先要把我们五张照片给他复制多一份，让他变成十张，这样子的话他才可以进行一个无缝连接。 然后呢我们就控制我们这一十张照片哈，十张照片让他滑动，一直滑滑滑，滑到什么时候呢？滑到这一半的时候，我们迅速把这个整一个 ul 这十张照片让他 拉回来，拉到第一张照片的时候，我们通过过程序去做这一个步骤的话，大家是看不出来的哈，他拉的过程很快，所以的话是看不出来任何破绽的， 我们也就是一直在重复这么一个动作，当我们向左边滑的时候，就一直滑滑滑，滑到中间的时候呢，把它拉回来第一张，然后再滑，然后再拉，所以往左边的时候就是这么一个过程。 我们的一个判断条件呢，就是这个 officer life 和这个 officer with officer left 呢，就是我们 css 里面给这个 ul 他添加这个绝对定位的这个 left 值哈，在 cs 里面拿到呢，就是他的一个 office left， 然后这个 offsetv 呢，就是我们整个 ul 它的一个宽度啊，整个 ul 的宽度，等一下接他拿到之后就是十张照片 一个宽度了，我们怎么去判断呢？当我们这一个 u l 他在滑动，他滑啊滑，滑，滑到一半的时候，滑到一半的时候，因为我们这个 ul 他是往左边滑的，所以他这个 offs 的值呢，是越来越小，但是绝对值来说是越来越大的。 当他这个值小于整个 ul 他这个 offsetv 的一半的时候呢，我们迅速把他拉回来，拉到第一张起始的位置，重复这一个步骤呢，他就会实现一个往左左边滑动的一个无缝轮波的这么一个效果了。 如果这个 ul 往右边滑的话，我们又怎么去判断呢啊？当我们这个 ul 他滑往右边滑，当他滑到左边这里哈，左边这里这个 offs 了，他等于零，他即将大于零的时候呢，我们让他回 回到这个 ul 一半的位置，也就是让这个 offset left 等于这个 offset with 他一半的大小， 他就可以实现这个啊图片轮播无缝连接的这么一个效果了。就他往右边滑，一直滑，滑到这里，他这个 offs 量呢，马上大于零了，就让他回到一半啊，回到这个 ul 一半的大小。这里哈， 好，思路，大概就是这样子，那我们呢，就正式来写一下他 gs 部分的一个代码哈， gs 呢，我们直接写在 html 页面里面，我们写在玻璃上面，这里，这里的话一直接通过一个可以标签。 接着呢，我们就要通过这个 js 拿一下我们需要操作的这些元素，这个 ul 刚才说了，我们要让他复制一份啊，这个 ul 的话我们要拿到， 还有这些 li 这些图片都要拿到，还有这两个 bot 按钮。好，首先呢，我们先拿一下这个 ul 哈，这个 ul 的话先声明一下，辣的一个， 然后通过这个 document， 这个 call it the letter 拿一下我们的 ul， 这样子的话，我们这个 ul 这个对象就拿到了。然后我们应该怎么样让这个 ul 他自己复制一份呢？这里也很简单，这里有一个 oul， 有个 innerhtml， 我们让他这个 h 填标自身加，等于他自己这样子的话，他就可以复制一份了。 我们再拿一下这些小粒，这些小粒的话给他一个 ali， 这里通过一个科列史料， 哦，把这些小链拿，拿一下，再拿一下我们的这两个按钮 也是一样的，也是 chris letter or 把它的类名呢传一下 这里，我们这些 ul 这个 ul 已经拿到了，他已经是复制了一份，里面已经有十张照片了，但是这个 ul 他本身的宽度呢，是不足以放得下这十张照片的，所以我们这里必须重新给他计算一下他的宽度。 那他这个宽度这个时候应该怎么去定义，怎么去计算呢？我们这里已经把所有的小列拿到了，而且他是一个数组来的，我们随便拿到他数组里面的任意一个，我们拿第一个，还要拿到他的一个宽度哈，他一个 再乘以一个整个数组里面一共有多少个小列，我们复制了一份啊，拿到这个数组他的一个长度，再加上单位给他就可以了。 这里的话我们可以弹一下，看一下我们有没有把这个重新定义过的，这个有要他的宽度有没有拿成功哈，我们放进去。 我们刚才我们刚才写的时候呢，这个 ul 我们写的宽度是多少？我们我们看一下 这个 ul 呢，我们写的宽度是一千六，我们复制了一份哈，已经这里复制了一份。然后呢又重新计算了他的宽度，把十张照片十个小绿的宽度传给了他。这里的话如如果没有意外，这里弹出来就应该 是三千二百个像素。哎，这里没错，这里的话我们就可以接下来写。 其实我们这里还要定义一个东西哈，给他随便起一个名字，叫一个别的一个速度，就是控制我们这一个图片轮播他滑动的一个速度来的哈，这里的话我先给他一个直付二。 还有这里呢，还要写一个让我们这个图片轮播他运动起来的这么一个函数，我们叫木 木服呢，我们要判断一下，当他往左边滑动的时候， 往左边滑动呢，我们刚才说了，但我们这这个 ul 啊，这十张照片他一直滑，滑到 一半的时候啊，我们马上要把它拉回来，也就是说他这一个 office officer left 这个值，当他小于他一半的宽度啊， officer with 他一半的宽度的时候呢，就要让他重新为零。 所以这里就是我们的这一个 o u l 它的一个 offstair left 当它小于副的哈，这里是个副词 o u l had a 自身的一个 officer with， 然后呢，除以二，也就是一半。当这个条件成立的时候，我们就要重新对他这个 oul 他的一个 left 让他重新为零，哈，重新为零。这里呢是空 控制他往左边来移动的，我们再来判断一下他往右边移动的一个条件，这个条件应该怎么判断呢？我们回到这个图，当我们这个 ul， 当这个 ul 他往右边来滑，哈，一直滑，他是不是滑到第一张照片这个 off the lap 马上大于零的时候，我们是不是要让整个 ul 他回到他自己宽度的一半啊，也就是回到这个中线了， 回到这里啊，回到这里，让他再重新往右边来移。这个时候是不是啊？单这个 offset left， 当这个 offset left 当他的值马上大于零啊，我们就让他回到这个 offset with 一半的位置哈，所以呢，这里就这样子来写我们这个 o u l 他的一个 offset left 值，当这个 offset left 值大约零的时候呢，我们马上重新对他这个 left 值进行一个副职 复制，多少呢？也就是上面他这一个 ul 他宽度的一半， 然后呢，再加上一个 ps 给他，这样子呢，我们就对他往左边移和往右边移的条件就已经判断好了。接下来呢，我们就可以控制一下这个 ul， 让他有一个动起来的这么一个速度，也就是说我们要改变一下他的一个 left 子，让他 不断的改变它的一个位移，我们可以拿到这个 ul 啊，这个 ul， 它的一个 office left， 这个 office left 呢，我们 我们可以给他一个速度，等一下的话，我们就通过这个定时器不断的改变啊，不断的改变，让他不断的重复复制给他呢，他这个 left 子呢，他就会发生变化，这样子的话他就会产生这一个移动运动的这么一个效果哈，这里再加上一个单位， 这里这个死壁啊，这个速度哈，我们前面这里定义的话，初始化是给他一个副职，也就是说让他一开始他是往左边来滑动的， 下面的话我要让他自动可以运动起来呢，我还要给他做一个定时器，这定时器的话随便给他一个名字， 然后来个 set interval， set interval 呢，把我们这个函数放进去，然后让他每三十个好好秒啊，就运动一次。现在的话我们可以到浏览器啊看一下这个效果。这时候呢， 那我们一刷新我们就可以看到我们这个图片轮播呢，他就已经可以运动起来了。我们试着修改一下这个死逼这个数值哈，把它从负二改成一个正二， 没意外的话，他应该就是往右边来移动啊，正数的话就是往右边来移动，把这个值把它改大一点，这个时候呢，他运动的速度啊，就会快很多了， 我们还是把它改成一个负二，让他一开始呢是往左边来移动的，现在呢我们还要添加上这么一个效果， 也就是说当我们鼠标移到我们这个图片轮播里面的时候呢，这个图片轮播他会停止播放，再移出来他又会继续播放。这里的话我们要怎么做呢？ 其实这里很简单，我们只需要找到我们这个鼠标需要操作的这个对象，也就是这个 ul， 然后的话给他添加一个事件监听，监听的话监听什么事件呢？就是我们这个猫是 over 这个事件，这个事件需要让他干嘛呢？ 需要他帮我清理这个定时器哈，清理这个胎儿这个定时器， 这个时候我们就可以去浏览器，我们一刷新，哎，运动呢，他是没问题的，当我们把鼠标放上去，他就会停止运动了， 只是说我们现在把鼠标移出来呢，他还不会继续帮我们运动起来，没关系，我们接着往下写，我们现在要让我们这个鼠标移出这个 ul 的时候，这些图片他又可以继续 运动起来，这个时候呢，我们可以给这个 ul 再加上一个事件监听哈，这个时候我们需要监听什么事件呢？就监听这个鼠标他移出来这个事件，也就是这个猫啊，这个事件监听了之后我们让他干嘛？ 监听到这个事件的话，我们就要让他是不是重新开启这个定时器啊？那这个定时器重新开启我，我们应该怎么做呢？是不是直接一个 set interval 就可以了？我们这里看起来好像可以，我们试一下， 我们到浏览器哈，我们现在一刷新，当我们鼠标移进去的时候，他确实可以停了，然后移出来，哎，他又运动了，看起来没有什么问题。我们再次糟了，我们发现现在他停不下来了，然后出来，哎，他越来越 快了，越来越快，对吧？这里是什么情况呢？大家有没有发现在我们做这个猫是奥这个鼠标移出去的这一个事件监听的时候， 我们只是让他开启了一个定时器，但是并没有把之前这个定时器啊给他覆盖掉，也就是说当我们把鼠标移进去，他这里确实是 看电影了，把这胎母这个电池器给清掉了，但是他并没有清到这一个啊，对吧？这一个他并没有清掉，所以呢，我们必须把这个胎母在这里给他重新复制一下， 所以这里的话我们再去浏览器，我们刷新，哎，这个时候放进去移出来没问题，放进去移出来没问题，哎，这样子他就没有问题了，我们现在就剩下呢，就这两个按钮，控制一下他的 运动的一个方向，这两个按钮，哈，我们回到代码这个时候，其实想让这两个按钮来控制他运动的方向已经是非常简单了， 我们上面已经把这两个按钮都拿到了，这里是个数组，放的就是我们这两个按钮。还有刚才说了我们要控制这个运动的方向呢，就修改这个识别的他的一个正副直就可以了，副直他就是向左运动，正直呢，他就像右运。我们来给这两个按钮绑定一下事件啊， 先拿到第一个按钮，给他添加上一个昂克力事件，昂克力之后，也就是说点击之后我们要让他干嘛呢？ 是不是直接修改这十笔？直修改他的一个正负值就可以了，对吧？让他是一个负数，这里的话还是负二，然后第二个扭负 这一份哈。这里的话第二个按钮被点击的话，直接让他变成一个正数。现在呢？我们就到浏览器去刷新看一下这边一刷新，哎，没问题哈，放进去没问题，移出来没问题，然后让他向右走， 哎，向左走都没问题。好，那我们整一个图片轮播这一个项目的话就做完成了。好。

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