粉丝74获赞639
相关视频
13:00查看AI文稿AI文稿大家好，这个视频来做一个轮播图的家人们，来看一下完成之后的效果。当我把鼠标从图片的左边移进去呢，哎，下一张图片他会从左向右滑进来，如果把鼠标从下边移进来， 哎，下一张图片呢，他就会从下往上滑进来。同理，当鼠标从右边进来呢，下一张图片他就会从右向左滑进来，还有从上边进来。 看起来呢，好像还挺简单的，但其实比我们之前做的一些无缝滚动的轮播效果啊，这个呢，还稍微有难度一点，主要呢，看大家的思路，怎么出来方法呢？不止一种。 这里呢，给大家分享一下我自己的思路啊。先来说一下大部分人可以想到的可能呢，就是把图片这个区域再给他分成四个小区域，或者四个遮罩层出来， 当鼠标分别经过一二三四几个区域的时候，再让图片从不同方向进来，对吧？但是这样呢，会有一个问题，就是如果鼠标他从四个角落进来啊，比方说从左上角这个地方进来， 那从这里进来，他算是上面的还是算是左边的呢？同理，右上的这个角还有下边两个角呢，情况是一样的，所以这样来分这几个区域呢，他不够严谨，我要做到的就是经过左边进来，无论是不是从角落进来哈， 他都是左边的图片呢，向右滑进来，从上面进来也一样啊，哪怕呢，我现在是从角落这个地方进来的，还有从右边进来，还有从下边进来，都一样。但是这样来分这四个区域呢，他角落部分会存在公共的这个公摊，面积越大，矛盾呢 可能就越大，对吧，所以呢是不行的，我们就可以换下思路，把这四个区域给它分成四个梯形，也就是呢，这样是不是就可以解决了？但是这里我们单纯靠 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， 来看一下最终的效果。把鼠标从左边移进来，没有问题，上面右边下面再移进来，没有问题啊。好，这个视频就到这里，感谢大家的收看。
389小K师兄
25:30查看AI文稿AI文稿大家好，我是清新，今天带大家开发带左右按钮的自动轮播图效果的布局，那么就是这样一个简单的布局，那么涉及到动画的部分，我们怎么在后面 gs 的时候我们再给大家讲， 那么在这个布局当中啊涉及到四个非常重要的知识点，我们来看一下，那么第一个就是这个 projesion 定位的实战应用，第二个就是轮播图的执行原理，第三个就是这个小按钮如何自适应水平和垂直居中，那么第四个就是这两个左右按钮如何自适应垂直居中。 那么接下来我们就开始写代码，我们先把这个代码窗口拖大一点，然后我们在这里新建一个网页文件，我们来给他取个名字，叫做带左右按钮的自动轮播图效果， 点 h t m l 回车，然后按住 shift 键感叹号回车，调出我们这个网页的骨架。 那么接下来我们就开始写代码了，那么首先第一步我们需要干嘛？我们需要在页面当中构建这么大的一个长方形的区域，用来放我们的班人图，那么接下来我们来构建一下，点上班人 回车，那么接下来我们来给他添加我们的 css 样式点上班了大括号，我们给他加上一个宽度一千像素，加上一个高度四百六十六 ps， 然后我们给他加上一个背景颜色， ctrl js 保存，然后我们在浏览器当中来查看一下效果，那么这样一个长方形的区块就构建好了，那么他与 上面和左边有这样一个间隙啊，那么这个间隙我们可以通过右击审查元素查看一下，我们来选中我们的玻璃，大家看一下这里是不是有八像素的外边距啊 啊？也就是说这个空隙是浏览器默认变异的时候玻璃自带的八像素的外边距，我们不需要，我们就把它给干掉， 胖子加速保存就没有了。那么接下来我们要把这个蓝色的盒子移到水平中间的位置，这样好看效果，所以我们给它加上一个外边距，上面是五十左右自动相等水平距，中下外边距是零， 那么这样就 ok 了，那么接着往下看啊，那么我们要构建这样一个轮播图的效果，我们来看一下他这里是什么这样一个播放的效果，那么他的一个布局到底是怎样来实现的啊？所以接下我们要给他讲他的一个执行原理。好，我们来看 看一下啊，那么比如说我们这个小框框是我们现在这个大的蓝色的盒子，然后他其实是干嘛哈？他是在这个盒子里面呀，构建了一个无限大的红色的盒子，然后在这个红色的盒子里面放了什么？放了 我们的要滚动的内容的部分啊，大家可以看就是大概就是这样的放了放上去的 好，然后我们能看到的这个部分就是这个地方的这个部分，对吧？所以我们需要把这个盒子设置超出的部分设置为隐藏掉，那么就看不到了，那么他在在整个滚动的时候，他其实滚动的是水哈，他其实滚动的就是这个红色的盒子， 他往左边滚，左边一滚了之后，那么他里面的内容肯定是跟着一起走掉了吗？那么这个时候他把第 一张滚出去了之后，这个手你在这里就看到了第二张图片了，那么这就是他整个的一个动画的一个执行原理啊， 所以接下来我们要在这个盒子里面构建一个无限大的盒子，然后在这个无限大的盒子里面构建一个一个的小区块来放我们的图片， 所以接下来我们可以利用我们的 ur 无序列表标签来进行构建。好，我们来怎么样？我们来选择五个 ri 啊，我们来构建五个 ri。 好，那么接下来我们为了给大家看效果，我们来给美 ri 怎么样？和 ur 加上边框线，我们来看看效果啊。 好， ctrl 加是保存，那么这样一个 ur 就出来了，我们再来看一下我们的 r i ur 下面的 r i border， 同样的我们给它加上两像素啊，我们给它加个黑 色的。好，那么这样一个效果也就出来了，那么我们刚才说了，这个红色的这个 ur 相当于是无限大的，所以我们可以给他加上一个无限大的宽度，给他加个一万吧，是吧？ 大家看一下，那么这样子之后你就看到没有？在这拖拖拖，看到没有啊？非常的大了，然后里面的每一项这个 ri 他的宽度是多少呀？我们来看一下啊，他的宽度其实就是外面这个盒子的宽度，一千他的高度也是外面这个盒子的高度。好， ctrl js， 这大家看到没有啊？就是这样一个效果的。好， ok 了之后我们来看一下，那么他这里是不是有间距啊？大家看到没有？这个地方还有这个小点点啊，其实我们可以选中这个什么啊？ ur， 我们来看一下大家就可以了啊，我们来选中这个 ur， 大家看，其实这个 ur 自带的默认的外边距还有内边距，所以我们也不需要，我们就要把它给干掉，所以我们可以在这里把 ur 自带的默认样式给干掉，比如说第一个我们加上一个拍点设置为零， ctrl 加 s 保存，那么这个间距就没有了啊，当然他还有个默认的外边距，我们刚才也看到了，只不过 主要在这里好像看不到，是不是因为他穿透了啊，在上面好看成加 s 哎，然后还有一个黑色的小点点，我们来看一下啊， this dealt， 好，我们也把它设置为浪好，那么这个圆点点也就没有了。没有了之后，那么我们来看一下他这里的每一个 ri 是从上往下显示的，那我们刚才说了，他应该是怎么样在水平方向显示的，所以我们要给每一个 ri 给他加上 一个左浮动。好看，车架是保存啊，这样子大家看到没有？好，我们来看一下啊，大家看一下是不是每一个区块就出来了，那么接下来我们要在每一个 i 里面插一张图片， 所以接下来我们在里面来插图片，我们一次性插吧，按住 ctrl alt 键啊，然后 img 回车， imajes 杠，我们来选择我们要插入的这些图片啊，好，我们把这里改成啊， 这里改成三四五 ctr 加 s 保存，那么这样的五张图片就插入进来了，看到了吧？ 好，那么它接下来要执行的这个动画它是怎么样的？我们刚才说的它是在滚动外面这个 u r 来达到这个效 效果的，那么这个 ur 能够进行位置的移动的话，那它一定是一个绝对定位的元素了，那么它相对谁来进行位置移动啊？也就是说这个 ur 它是相对于外面这个斑斓来进行位置的移动，所以我们可以给这个斑斓加上一个 projesion 相对定位， 然后我们给幼儿加上一个 position 绝对定位， ctrl 加 s。 好，当然这个还看不出什么效果啊，那么接下来他默认的是显示的第一张，所以 left 是零， 然后透步也是零啊，这样没有问题了。好，我们把这个窗口放大啊，那么接下来我们来看一下，我们要把第一张图片移走，然后显示第二张图片，那我们来看一下我们怎么做好，我们是不是只需要做一件事情啊？就是把这个 life 车车子给 再修改一下，那么第一张图片的宽度是一一千，所以我们要把它移走，那就是负一千看才减 s， 那么这样子第一张图片移走了，那么在这个区块看到的就是第二张了。好，当然如果大家想更清楚的看到，我们可以这样子来给大家调试一下啊，我们右击审查元素。 好，我们来看一下啊，我们把它往下拖一点，我们来选中这个 ur， 然后这里有个 left 的值，看到了吧，我们可以给他剪剪剪啊，大家看一下，你这样一剪之后，大家看一下他是不是就整个在往右边移动啊？ 啊，所以他整个轮播图的一个效果就是这样来实现的。好，但是有一个点就是我们当我们在轮播的时候，我们只看只能看到这一张，是吧？所以我们需要做一个点，就是超出了这个 banana 的这个部分， 我们要把它设置为隐藏，看不到，所以我们可以给班人加上一个 over from hand 的 超出部分，设置为隐藏。然后我们来看一下，这个时候你能看到的就只有这个部分了，对吧？好，这个时候我们可以在这里再来演示一下我们这个 ur， 比如说我要移动的时候，大家看你就能看到里面的图片在动了， 对吧？啊？只不过我们现在这里的速度比较慢一些啊，人工操作吗？好，那么他整个的一个执行原理啊，就是这样子的了。 好，我们来把它重新刷新一下，然后我们来把我们刚才添加的这些辅助线把它给注射掉，然后这个辅助线也注射掉。好，那么它整个的一个滚动的原理我们就 讲完了啊，那么接着往下看啊，那么接下来我们要做的是什么？这里是不是有两个大，看一下这两个左右切换的按钮啊？所以我们来构建两个 div 来制作这个切换按钮，同样的，我们是在这个班人里面去写啊。 好，我们来构建两个，第一个叫做 pro， 对吧？向前的按钮，那第二个叫做类似的向下一张的按钮， 那么这两个按钮的话，那接下我们要给这两个按钮添加宽度和高度，所以我们来给他添加一些样式啊。点，上班了，下面的怎么样？我们来看一下啊。点上 preview， 我们来先控制他的怎么样？ 前一张的这个按钮的样式，我们来给他加上一个宽度啊，他的宽度是四十一，他的高度是六十九，然后我们给他加上一个边框，看效果。加两像素吧， 看得清楚一下，看成 gs 保存。当然这个时候我们来看一下，你好像什么也看不到，为什么？因为我们刚才给外面这个盒子设置设了什么 overflowm， 焊的超出部分的那种隐藏好，所以我们现在为了看效果，我们可以先把这个代码注视掉， 那么注视掉了之后，你发现你还是看不到，为什么呀？因为我们这个 ur 它是一个绝对定位的元素，它相当于是漂浮的，所以这个按钮肯定是被它盖住了。所以如果你还想看的话，你还可以做一件事情，我们可以先把这个注视掉， 注视完了之后，你看一下是不是就在这个位置啊？好，那么接下来我们来看我们需要这个按钮怎么样悬浮在这个图片上面，所以我们肯定也需要用到我们的定位，所以接下来我们可以 给他加上一个定位 for jason absolute， 那么他也是相对于我们这个 balance 进行位置的移动，所以我们来看一下啊。加了之后，那么接下我们要控制他的位置，首先第一个他与左边是零，这个没有问题啊。 left 零 px。 那么它与头部的距离是多少呀？我们可以通过精准的来计算，比如说这个高度是四百六十六，然后减掉它的一个高度除以二，是吧？这是一种方式。那么还有一种方式啊，我们来看一下，我们可以这样子做，比如说我给它加上一个 top 百分之五十。 好，我们来看一下，这个时候我们来看一下啊，你会发现一个什么效果透不？百分之五十，也就是说他怎么样，他与头部的距离正好是整个盒子的 一半了，一半的这个位置，那么接下我们要让他居中的位置，我们就要把这个盒子往上移多少？移他自身的高度的一半就可以了。好，所以接下来我们可以做的事情就是 marking 杠 top， 那么他的高度是多少啊？六十九，那么移一半，向上移，那么就是多少，我们可以给他个三十五 啊，因为他这里没有办法捐分哈，大家看一下，那么这样就可以了。好，那么同样的，我们右边这个按钮， 我们来看一下。那么右边这个按钮其实跟左边这个按钮的什么整个样式是一样的，唯一的就是什么他不是在左边显，他是在右边显示，所以我们可以干嘛？我们可以在这里这样子啊，我们来看一下，我们可以把它复制一份， 然后我们给它改成什么？改成 list。 好，然后我们把这个左改成什么，它与右边的距离是五十就可以了， 大家看左右两个按钮就出来了，出来了之后我们接着往下看，那接下来我们是不是要给他们添加背景图片呀？好，我们来给他们添加背景图片。 background， 我们来添加。 i m a j e s 杠，我们来给他添加哪一张图片？我们来看一下这个按钮的这张图片在哪里啊？这个按钮是立的 啊，就是这张图片。好，我们来看一下。 gs 保存哎，大家看一下，当然我们这里最开始显示的是什么？是一个这样的，看不？不是很清楚这张图片是不是，所以我们来给大家看一下这张图片啊， 我们来在这里看一下这张图片，打开大家看一下，他是把四张小的按钮图放在一张图片上了，然后每张图片的宽度是四十一，然后中间这里还有一像素的间距啊， 那么我们最开始的时候要显示的是这一张图片，所以我们需要把这个背景图往左边移移多少，他的宽度四十一，他的宽度四十一就是八十二，八十二，中间这里还有一像素就是八十三， 所以我们在这里我们来看一下啊，我们需要给他加上一个他的一个位置的一个移动，所以是负八十三， 然后零，也就是往水平方向移八十三，垂直方向不要移，那么这样就没有问题，哎，大家看一下是不是 ok 了？好，然后右边这一个我们来看一下啊，我们可以把 这段代码复制一份拿过来，复制一份放到这个位置，然后我们来看一下啊，那么他要移走多少哈，那么他要移走的话，我们同样要看这一张图片了， 那么要显示的是这一张，我们需要把前面三张都要移开，所以这里是四十一，这里是四十一，这里也是四十一， 四十一加四十一是八十二，八十二加上四十一就是一百二十三，一百二十三加上这里有个空格，加上这里也有一个空格，所以就是一百二十五，所以这里应该是负一百二十五。 好，我们来看一下啊，大概就是这样一个效果啊，没有问题了。好，那么接着往下看啊，那么接下来当鼠标划上去的时候，我们来看一下，鼠标划上去的时候，大家看一下他是不是要 换了一张图，是吧？图片啊，图片还是刚才那一张，只是把位置移动了一下，所以接下来我们来给他们要加上一个 banner， 点上 pro， 好玩，当鼠标滑动到它上面的时候，那图片还是这张图，不要动，我们唯一的就是要更改这张图片的什么位置，那么我们现在要显示的是哪一张？就是这里，这里他的位置是多少？就是零零，所以我们来看一下啊，我们把这个 background 或 jason 只要更改它的一个图片的位置就好了，其他的都不需要动， ctrl 加 s 保存，保存好了之后我们来看一下，哎，是不是 ok 了？ 好，那么右边这一个我们来看一下，同样的原理，所以我们可以把它复制一下，然后这一个我们来看一下啊，他要移走的应该是负四十 啊，就可以了。 ctrl 加 s 保存。哦，我们没有加，是不是啊？这里把它改一下啊，把它改成 nice， 好， ctrl 加 s 保存。哎，这样就可以了。好， 那么同样的，我们把刚才这些代码把它给什么样还原回来，那么这个时候你就看到了这样一个效果了啊，这个 overflow 我们最后再把它隐藏掉吧。 好，那么写到这里之后，我们来看一下，这上面有很多代码是相同的，我们有没有办法把这些代码合并一下呀？这个看起来太杂了，是不是？可以啊？我们来看一下，我们来怎么合啊？ 点上 preriver 逗号，点上 banner 下面的，点上 list。 好，那么这样的话，我们就是把这个什么 banner 下面的 preriver 和 banner 下面的这个 list 相同的代码放在一起，我们来看一下哪些代 是相同的啊？这些代码肯定是相同的。好，所以我们把这里就给他干掉，然后与头部的这个还有这里是相同的，所以我们也要把它放到里面去，然后这里我们也可以干掉。 好，我们来看一下啊，那么这段代码我们来看一下可不可以优化啊这段代码，这段代码好像两个人不一样啊，但是他其实上有有共同的一个点啊，我们来看一下，我们可以给他把背景图片 我们来看一下啊，翻过来，也就说他的背景图片是不是共用的是一张背景图啊，所以我们这里可以把它拿过来，然后唯一的他不一样的点就是他每一张背景图的一个位置不一样，所以我们把这里删掉之后，我们可以把它改了，改成什么拜克格浪的杠，什么 for jason， 就是单独只要控制每一张图片的什么那个位置不一样就好了啊， 好，那么这样子就可以了，代码也简化了，效果也就达到了，也就是说把他们公用的样式相同的样式把它放在一起，然后再单独再给他们添加不同的地方就可以了，这样代码量相对就比较少了，大家看一下效果是没有变的好， 那么这里做完了之后，我们接着往下看啊，接下来就是这个部分了啊，那么这个部分首先我们也要构建这样一个长区块，然后把它定在这个图片上面呢， 所以同样的我们来构建下面这些按钮啊，点上一个什么 b u t t o m butter， 然后我们也要给他添加宽度，高度点上扳的下面的，点上 b u t t o m， 我们给他加上一个宽度，百分之百加上一个高度，我们给他五十像素，然后我们给他加上一个背景颜色，掰个啊，那么他的背景也是是黑色的，半透明的，所以是零杠，零杠零点零五好， 当然加完之后肯定也是看不到效果，因为他也被整个区块给盖住了啊，所以同样的我们要做的还是可以把它 怎么样注视掉，看一下，再看是不是在这个位置啊啊，当然我们要让他显示在这个图片上面，所以首先我们要做的还是要给他加上一个绝对定位，所以 position absolute， 当然它同样的是相对于外面这个斑斓进行位置的移动啊，这个斑斓我们已经设置为了相对定位的元素了，所以我们不需要在这里去改什么代码了。 加完之后，然后我们来看他与左边的距离是零，他与这个班的底部的距离是零，那么这样就没有问题了， ctrl 加 s 保存 在这个位置显示，那么接下我们就要在这里面构建什么构建我们这些小按钮了，好，我们这里有五个小按钮，我们分别用十五个十泵来构建啊，十泵乘以五回车。好，我们把它一个一个换行了，看一下 ctrl 加 s 保存好，那么 ok 的，这这里还看不到效果啊，因为他们还没有给他添加任何的样式，那么这个小按钮我们是怎么样？他其实是一个 宽度和高度大概十像素的这样一个小方块，然后把它设置为圆的，所以接下来我们要给这个丝泵添加宽度和高度。 点上搬了下面的 butter， 下面的 spoon， 我们给它添加一个宽度十像素，添加一个高度十像素，然后给它加上一个背景颜色，白色的，我们来看效果， 当然什么也看不到，因为这个班人这个是蹦，他是一个泪点元素，他不支持宽告的设置，所以我们要把它转换。为什么？你可以转换为会计元素，也可以转换为什么？ inn block 行列会计元素，但是我们要让他在一行显示，那会计元素肯定是做不到的，所以我们用行列会计元素， 那么这样子就在这个位置了。那么接下来他是圆角的，所以我们要把它设置为圆角，所以 border 杠 redears， 我们把它的半径设置为它的整个的宽度的啊，一半，大家看一下，这样就没有问题了。好，没有问题的，这我们来看，他们之间 默认是有空隙的啊，这个空隙我们肯定不需要，因为他是自带的，我们来看一下这空隙怎么产生的啊？我们之前的视频一直有讲到过这个问题，看一下复制过来就没有了。所以这个空隙他是通过什么浏览器变异的，这个换行和这个空格造成的。 好，那不同的浏览器他又不一样，所以我们怎么做？哈，认真看啊，我们只需要干嘛在他外面的这个盒子上面加上一行代码，叫做方针杠塞子零 px 就可以了。 这个空隙你看到没有？上面下面这个空隙全部都消失了。好，消失了之后接下来他要有空隙，我们很简单呢，我们可以给私奔单独添加外编剧就好了，上下外编剧不需要，我们左右给他加上三像素的外编剧，他们就分开了。那么接下来我们要让这些小按钮在这个什么，在这个区块里面 水平和垂直居中，我们来看一下怎么做啊？这里很重要啊，非常非常的重要。首先我们来看一下，我们要让他们在水平方向居中，还是挺简单的，我们只需要干嘛呀？只需要给外面这个盒子加上一个 test 杠和浪 伸头就可以了，这样就在水平方向居中了，但是要在垂直方向居中怎么办嘞啊？认真听哈，这个地方非常重要，我们首先我们给外面这个大盒子，我们可以给他加上一个行高， 行高等于多少呀？这里是五十是不是？所以行高也是五十，看是价是保存。哎，这样一看你好像认为居中了，我们来放大一下啊，其实他并没有完全居中啊，我们来截图看一下你就知道了，他并没有完全居中，你看到没有？这里你看 啊，然后我们来拖到下面，你看是不是下面还留了很大的一个空隙，是吧？你看这里，所以他根本并没有完全居中。好，那接下来我们要让他完全居中怎么办啊？我们只要再加一个代码就可以了，就是我们给这个私奔啊加上一个这个代码 mid 啊，好，我们来看一下，这样的话他就会这个是泵啊，他就会相对于上面这个区块的这个行高的基准线来进行垂直居中对齐， ctrl 加是保存，这样子就可以了，我们来放大一下 看，就完全居中了。好，这里大家一定要注意了啊，所以大家对这个代码一定要非常的熟悉啊，好，没有问题了，那么接下来我们还有最后一步了，就是当怎么样我们点击 到哪个按钮的时候，他这里要有一个变色的一个效果，有当前选中的按钮，他的颜色不一样，所以我们可以给当前选中的这个按钮，我们给他加上一个单独的样式。好，然后我们来给他添加单独的样式啊， 是泵点上 c u r r e n t， 我们给它单独加上一个什么背景颜色， hot pink， 看成加是保存，那么这样就可以了啊，当然关于他什么点击之后他变色呀，包括他整个的左右切换的一些效果呀，也就这里的一个自动能播的效果，我们在后面的 gs 课程当中学到了，我们就会给大家来补充。 好，那么接下来我们来把这里把它给注射，把它给删掉啊，然后我们再把这个 overflamhand 把它给加上，超出 部分隐藏 好，最后我们要把这个按钮的这个边框线把它给干掉， 那么这样一个布局就出来了啊，如果说你想要他滚动的话，我们来看一下他是可不是不是真的可以按我们刚才说的实现的滚动的效果了。我们最后再强调一下，他滚动的时候是滚动的这个 ur 来改变这个 ur 的 life 的值啊，看到了吧，所以我们来看一下， 看到没有啊，那么他就可以这样往左边滚了 啊，好，那么所有的滚动啊，包括后面的效果都是 g s 需要讲的，我们只是给大家讲整个的一个布局和原理。 ok， 好，那么这一节课我们给就给大家讲到这里的啊， 那么关于这个布局，我们给大家整了一个非常详细的文档啊，比如说每一步要做什么，然后我们来看一下，比如包括每一步里面又分很多小步骤，是吧？第一步干嘛？第二步干嘛？大家看一下啊，就是让你对这个轮播图有一个完整的思路，包括每一行代码 再看，如果大家需要这个文档的话，也可以私信获取啊。还有的话，我们总共录制了大概有十六个案例了啊，我们总共是三十个案例。好吧，那么就给大家讲到这里了啊，拜拜。
203艾编程
22:55查看AI文稿AI文稿这个视频带大家来做这么一个无缝连接的图片轮播的效果，我们来看一下我们要实现的功能有哪些。 首先我们这个图片轮播呢，它里面有五张照片不断的在循环播放，当我们一打开页面的时候呢，照片它是从右向左滑动的，当我们把我们的这个鼠标移进去图片里面的时候呢，它就会停止滑动， 再把鼠标移出来呢，他又会继续滑动了。还有呢就是下面这两个按钮，我们图片一开始呢，他是从右向左滑动的， 如果说我们想让他切换一下方向，我们可以点击一下这个向右走的按钮，他就会向右边滑动，再点击一下向左走呢，他又会往左边移动了。 这个效果里面呢，它涉及到我们 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 就可以了？我们这里看起来好像可以，我们试一下， 我们到浏览器哈，我们现在一刷新，当我们鼠标移进去的时候，他确实可以停了，然后移出来，哎，他又运动了，看起来没有什么问题。我们再次糟了，我们发现现在他停不下来了，然后出来，哎，他越来越 快了，越来越快，对吧？这里是什么情况呢？大家有没有发现在我们做这个猫是奥这个鼠标移出去的这一个事件监听的时候， 我们只是让他开启了一个定时器，但是并没有把之前这个定时器啊给他覆盖掉，也就是说当我们把鼠标移进去，他这里确实是 看电影了，把这胎母这个电池器给清掉了，但是他并没有清到这一个啊，对吧？这一个他并没有清掉，所以呢，我们必须把这个胎母在这里给他重新复制一下， 所以这里的话我们再去浏览器，我们刷新，哎，这个时候放进去移出来没问题，放进去移出来没问题，哎，这样子他就没有问题了，我们现在就剩下呢，就这两个按钮，控制一下他的 运动的一个方向，这两个按钮，哈，我们回到代码这个时候，其实想让这两个按钮来控制他运动的方向已经是非常简单了， 我们上面已经把这两个按钮都拿到了，这里是个数组，放的就是我们这两个按钮。还有刚才说了我们要控制这个运动的方向呢，就修改这个识别的他的一个正副直就可以了，副直他就是向左运动，正直呢，他就像右运。我们来给这两个按钮绑定一下事件啊， 先拿到第一个按钮，给他添加上一个昂克力事件，昂克力之后，也就是说点击之后我们要让他干嘛呢？ 是不是直接修改这十笔？直修改他的一个正负值就可以了，对吧？让他是一个负数，这里的话还是负二，然后第二个扭负 这一份哈。这里的话第二个按钮被点击的话，直接让他变成一个正数。现在呢？我们就到浏览器去刷新看一下这边一刷新，哎，没问题哈，放进去没问题，移出来没问题，然后让他向右走， 哎，向左走都没问题。好，那我们整一个图片轮播这一个项目的话就做完成了。好。
743小K师兄
11:34查看AI文稿AI文稿大家好，这个视频来做一个无缝滚动的图片轮播。先来看一下完成之后的效果，首先在浏览器上面呢，有四张照片从左往右移动，并且是循环播放的，如果我们希望轮播可以暂停下来呢，很简单，只要把鼠标移动到图片上面就可以暂停了。 这个时候我们把鼠标移动到图片靠左边一点的位置，哎，他出现一个向左的按钮，移动到右边呢，他出现一个向右的按钮，在中间是没有的，这两个按钮呢主要是用来切换这个轮拨的方向的。 好，我们先来思考一下整一个思路，这个呆萌的重点呢，主要就是怎么样让图片可以无缝滚动起来，因为我们只有四张照片往一个方向轮播，当播放到最后一张照片的时候，第一张照片他是怎么样做到很平顺的衔接过来的， 还有怎么样控制这两个按钮哈，只有鼠标在靠左还有靠右的这两个区域才会显示出来，这个区域又是怎么样计算出来的？ 这个呆萌我将会分为两个视频来跟大家讲解。第一个视频主要来说一下布局，通过 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 把无缝滚动的轮播效果呢给他做出来。好，这个视频呢就先到这里，感谢大家的收看。
923小K师兄
11:18查看AI文稿AI文稿大家好，上个视频我们用 css 简单实现了这个无缝滚动图片轮播的布局，但是现在这些图片还是动不了的，按这两个按钮也不行啊。这个视频我们就结合 gs， 让这几个图片可以轮播运动起来，并且可以通过这两个按钮来切换轮播的方向。 先给大家来分析一下思路，现在大家看到有四个红色的小方块代表我们用来轮拨的四张图片，黑色的方框就代表轮 显示的区域。每次呢，我们只可以看得到这个方框里面的这一张，其他几张被溢出隐藏掉了，我们就看不到了。我们要让图片在水平方向拨起来，是不是就 这几张图片往左或者往右来移动，对吧？但是我们只有四张图片，我们这个呆萌是只往一个方向来 轮拨的，要么往左，要么往右，比方说现在从第一张开始向左轮拨，哈，我模拟一下这个轮拨的过程，这个图片呢在滑动，我让他滑到第四张， 好，现在已经是滑到最后一张了，那图片要继续往左边轮播，但是后面没有图片了，我们滑到最后一张，接下来应该又从第一张开始轮播，循环这个过程，对吧？那应该怎么处理呢？这里先恢复到第一张照片， 直接跟大家来说方法啊。首先我要让这几张照片复制一份， 这样我们的图片就有八张了。接着我让这八张图片和刚才一样，也是往左边开始轮播， 先让他轮播到第四张，这个时候如果继续往左边轮播，现在我们就有图片可以跟上去了，对吧？ 不过重点也是这里了，当我们进入了新的第一张照片之后，如果继续往左边轮播的话，我们就不接着再往左边移动这些照片了。这个时候我通过 gs 迅速把前面的第一张给他拉回来， 当然这一个过程程序来做的话，是非常非常快的，我们是看不出来的，这个时候图片就可以接着往左边来轮播了。你看，当他播到下一个第一张的时候， 如果他继续还要往左边来轮拨呢，我们同样迅速把前面的第一张呢给他拉回来。这里大家要知道，我手动示范拉给大家看，大家看得到我 拉的过程，但是这一部分程序来做，他是瞬间完成的，大家是完全看不出来的。看起来这两张照片机呢，就是同一张啊，所以可以在视觉效果上面呢，实现无缝滚动。刚才说的是往左边来轮播的，那如果要往右边轮播呢， 其实是一样的哈，像现在再往右边移动的话，第一张图片他的前面，也就是那左边已经没有图片了，所以这个时候呢，我迅速把另外一个图片一给他拉过来， 这里我们虽然换了一个图片一，但是大家看不出来，对吧？我就是希望大家看不出来，不过这个时候我已经可以开始往右边来轮播了，因为呢，在他的左边已经有图片了啊，一直轮播到这个第一章的时候呢，同样我 再把前面的地毡呢给他拉回来，一直重复这一个动作，就可以完成一个向右边的轮拨了。 细心的同学应该有发现哈，就是呢，无论向左轮拨还是向右轮拨，好像都没有后面这三张图片什么事，对吧？ 他们好像根本就没有参与进来，那为什么还需要他们呢？这里其实是为了好计算，因为是直接把前面复制一份的，到复制的第一张这里哈，刚好是这八张图片的 终点位置，对吧，也就是那宽度的二分之一哈，无论我们有多少张轮播图，直接复制一份的话，这里呢都是二分之一的位置，这样子呢，就比较好计算。后面几张图片呢，确实没有参与轮播，这样子做呢，就是为了计算方便好轮 播的思路呢，大概就这样了，我们来看代码，我们要控制图片轮播起来，实际上呢，是修改 idv made 的这个点，他的位置这里我们可以通过定位来做哈，不断修改他的 left 就可以了。所以我们这里要对他的负极这个点啊，对他开启一个相对定位，然后呢，再对他开启 绝对定位，来到 sss 部分负极这个地，给他开启一个相对定位，再给他设置一个绝对定位， 给他一个 left 为零。等一下呢，通过 js 来修改这个 life， 就可以让他产生一个运动的效果。好，来看一下 js 代码，这里我提前获取到几个对象了，欧美就是我们控制运动的这个 d 的对象，欧玛斯呢，就是这两个遮罩的复元素的对象哈， 要呢，就用来控制鼠标移进移出，轮播的暂停和播放，还有就是图片的一个对象的速度。最后面这里呢，就是两个按钮， 根据我们刚才分析的，我们先让这几张图片呢复制一份哈，就从四张变成八张，直接对这一个欧美这个对象呢，让他的英呢 h 加等于他自己就可以了，还要声明一个控制速度和方向的变量哈，就叫 speed， 这个值越大，轮波的速度呢就越快，这个值为正的话，轮波呢，他的方向就向右来，轮波为负的话就向左，这个呢，等一下再来说初始值，我们设置为五， 然后来写一个控制轮波运动的函数。刚才说了，我们要让欧美这个对象运动起来呢，其实就是修改他定位里面的 left 词， 这个值，我就让他当前的 left 值，也就是呢， offset life 加上一个 speed， 再给他加个单位，再重新复制回去给他的话，那他的 left 就不断的发生变化，发生改变，他就可以运动起来了，对吧？再给他开个定时器， 让母粉呢不断执行起来啊，每隔三十毫秒执行一次，现在这几个图片应该就可以运动起来了。我们做测试的时候呢，让他速度快一点吧。回复的一开始呢，让他往左边来运动哈，来看一下效果，刷新 现在这些图片呢，就可以运动起来了。不过因为我们复制了一份哈，实际上呢是有八张图片在这里的，但是如果当他八张图片全部轮播完，后面就没有图片接上来了，对吧？现在呢，就没有图片了， 所以我们就要想办法把第一张图片呢给他迅速拉回来，做一个障眼法。所以我们就要来判断一下，先来判断往左的情况，往左的话，他的 offset 呢，是不是越来越小，对吧？当然他往左呢，这个值就为负的，他绝对值上来说呢，是越来越大的，但是呢， 他竖直上来说呢，他就是越来越小了，小于多少呢？是不是小于他自身宽度的一半呢？这里是负的 to upset me 再除以二。 再给大家来分析一下哈，也就是呢，他往左的情况呢，让他往左来轮拨，一直拨到下一个一的时候，这里，这里是不是就刚好是他宽度的一半，对吧？他要是再继续往左边移动呢？哎，他就会小于他自身宽度的一半了。当然绝对值上来说呢，是大于 啊，但是数值上来说呢，就是小于的，所以呢，就是现在的这一个条件，这个时候我们就要把他拉回到一开始第一张照片的位置，对吧？所以这里呢，就让他等于零， 然后就是向右轮拨的情况，这里呢也要给他判断一下啊，同样给大家来分析一下，当他向右边运动，他的 left 值是不是越来越大，对吧？ 当运动到第一张照片的时候呢，哎，他的 left 值马上就会大于等于零。 left 值是哪一段的距离，这个大家应该清楚哈，属于定位的知识，这里没有详细跟大家说，简单给大家来画一下。 left 值呢，就是这个底，他的左边缘 距离它复元数的左边圆，对吧？也就是呢，这两条黑线之间的距离呢，就是这个 left 值， 当这两条黑线重叠起来呢，他的 left 值就等于零了，在左边呢，小于零，在右边是大于零的，重叠起来呢，就为零。这个时候呢，就刚好显示第一张照片，对吧？当他向右边来轮廓运动， 运动到第一张图片的时候呢，他的 left 值为零，但是呢，这个时候他左边已经没有图片了，如果他继续往右边来运动，他的 left 值就要大于零了啊， 就在他马上要大于零的时候呢，我迅速把下面这一个第一张给他拉回来，做一个障眼法，这样这个图片他的左边就有其他图片了，就可以正常来往右边进行轮播了。思路呢，就是这样子，所以这里的判断就是，当他的 offsile， 当他大于零，就让他的 left 值回到宽度二分之一的位置，对吧？ 就等于这一个啊，再给他加上个单位，现在应该就可以实现图片的无缝滚动了。我们来看一下还会不会出现刚才全部图片都轮播完，没有图片的情况。等一下啊， 一共八张图片， 哎，现在呢，应该就可以了，对吧？一直都有图片在轮播，只不过现在只可以往一个方向来轮播。先给 omas 添加一个事件粘贴， 当把鼠标移进去的时候，给它清理一下定时器，让轮拨呢，可以暂停下来。当鼠标移出去呢，再重新执行一下这个定时器，这里呢就改成 mouse off， 把这里 执行定时器，这里呢复制一下，好看一下效果，这里呢刷新把鼠标移进去，哎，这个轮播暂停了，对吧？移出去，他又接着播放了，没有问题。 最后还有通过控制两个按钮来切换轮毂的方向，这个呢就比较简单了，首先是左边这个按钮，也就是第零个，当他被点击的时候呢， 要是比这个值呢，变成负的就可以了。还有就是右边这个按钮，第一个当他被点击的时候呢，这个值为正的，来看一下效果。刷新 把鼠标移进去，暂停播放了，我们试一下切换方向哈，点右边，哎，这个方向呢，可以切换过来了，没有问题哈。如果想给轮播的 图片之间加点间距的话，我们可以找到没这个点，给他添加一个该属性就可以了，给他十个像素，这样子他里面的元素就会有十个像素的间隙了。好，来看一下最后的效果啊，刷新 哎，元素之间呢，有一定的间隙。把鼠标呢移进来，他暂停播放了，移出去，他接着播放，通过这个按钮呢，切换轮播的方向。好，没有问题，感谢大家的收看。
392小K师兄
05:53查看AI文稿AI文稿看到整个页面他是满屏的，是不是？其实呢，一般正常情况下，我们的页面不是满屏的，他会一部分啊，所以呢，这个 app 我们在一开始呢啊，就想定一个宽度 啊，比如我第一个一千啊，这个宽度一千， 我们再看一下，这说他一切呢，他就这样子，是不是现在电脑比较宽了，是不是？一般我们会定一千多，是不是他定多少啊？这个自己定哈 啊，如果说你定八百六百，可能就不太适合今天的很多电脑了，是不是百分百，百分百就比较少啊？这个也也有一些，上面有个盆条百分百的，是不是？但下面这里我们看下 啊，下面这张图啊，这张图很少是一百满屏的，这个定多少呢？我们自己处理就可以了。假如我定一千四或者七二三，那你这里定好之后， 下面的内容由全部定了，因为定的宽度不是百分百，那就是我们要做一个什么东西呢？ 是做一个居中，是吧？像居中，这必须的啊，一百就不用了，是不是？好，这时候居中了，因为下面这个轮廓的图在这里，他宽度也跟上面一样才好看，是不是？所以呢，我们接着做， 就马上下面这个内容的轮波，这个轮波首先我们先不要着急就做内容，我们要举一下，是不是按道理啊，因为这个已经是多少了啊，我们就在下 在加，是不是？那么也可以你上面这行啊，你把它这里加到一个行里面去，比如说可以这样再加个 dip， 然后把这个放到里面去 啊，这样也是可以的，但是这个内容，刚才这个内容有些属性呢，我们得定一下 啊，这个定了属性之后可能就你自己定一个了，就说我想把这个些内容放到这里面来，让他能够管理到啊，这个也够了，大家为我们慢慢整理好，你这样写这个 top 有没有问题呢？我们去看一下。 有问题是不是啊？有问题，意思是原来在 aapp 里面的一些样式啊，我们要放在这个 top 里面， 什么样式的？除了高度，宽度是不是？那我们这些可能要重复一份上放进来。好，这时候你才会发现是可以的，那么在这里呢，我们就把这个来拿走了啊，把这个 啊再来再刷新一下，看怎么样，是不是就可以达到刚才的效果，是不是会重复吗？然后剩下的东西呢，我们就可以所有东西都会在这里面， app 里面，标签里面去做啦，而这时候我们做第二个 vip， 是不是本辈在做什么啊？轮波图，我们轮波图啊是自己定一个名字，那你可以定其他名字是吧？ 好，这个名字输了，他有些是用这个，这个名字是不是啊？自己定啊，这个啊，我用这个也进也可以，一般准备做广告一样啊。好，这个内容我们先定好他的大小，然后我布局啊，先做好布局也发到这里来啊，首先 我把这个样式写在这里，宽度是多少？不知道高度是多少？不知道是不是。那就写一个高度写嘛 啊，随便写一个，然后呢？再写个背景颜色啊，为了看倒数啊啊，然后随随便写一个，然后再改一下名字啊，改一下内容啊，随便加一个不同就行了啊，就有点看的区别， 保存一下好，记得看一下，你发现这个东西将来我们要做什么啊？这个话没准备做什么啊，就准备要放 这些图进行轮播，是不是啊？想达到这样的一个效果，所以呢，我重新定一个位置，它里面就会放好多张图啊，怎么放？怎么实践？我前面已经有些例子，在这里我给大家看一下啊，这个例子呢，在这里我们之前写了一些例子 啊，总共多少个呢？我们再看这里啊，我运行要给大家看，是不是不是参考价值呢？他是一模一样的。好，右键我再点到这里来，然后运行一个。好，我准备就把这个放进来，是不是？ 是不是可以实现呢？只要把它放进来，他这样是轮波是不是啊？当然我们可以用 viu e 来做，用接起来做，是不是啊？看到时候的需要，是不是现在我们最简单指点，不做我就做这个内容，直接再加上去也是可以的。 在这里呢，怎么把它拿过来呢？首先我们知道这个内容我们需要的，而正话就在这里啊，这个是动画内容了，就这里一个名字，动画定义。然后呢里面呢放多少张图？这里肯定要改的， 看你放的图片是不是？好，等会我们就开讲把这个把它移过去，是不是说只要有这些例子，我们就到处给放，我们在学的时候呢，就准备很多这种小功能啊，案例独立放在一起，到时候你以后，哎用什么功能，我们就把这功能取下去，放到你的固定的位置，是吧？就可以实现 页面上看到的很多的效果了啊，现在我们看下，明显啊，这张图准备是轮播三张，是不是？我们这里呢？也是有三张图在轮播嘛，就很自然就是三张，五张是很正常的，是吧？不行再加是不是？好的，我们现在。
64百练成才![一百二十三、人人都能做前端：input[type=range],用滑动条控制图片模糊度 #web前端 #html #css #javascript #原创](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/3d7f381a4d4694d03b2884ac0b0ba341~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2098940400&x-signature=v7WL461m%2B4Vwecfk6z8aOMW4WkU%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260709153635B74CF0588006B9206A80)
01:08查看AI文稿AI文稿人人都能做，前端用滑动条控制图片模糊度，在页面上加入一个滑动条， 滑动条用音谱的标签 type 属性设置为 range idv valuem， 最小值为零，最大值为三十值开始为零，不长为一。给滑动条设置样式， 页面上多了一个滑动条，拖动滑动条图片没有任何响应， 需要给滑动条设置按 change 事件，先获取滑动条滑动后的值， 再根据滑动条的值给图片设置样式。把 focus 属性值设置为不让函数的返回值，参数为 滑动条的值加 p x， 这样再拖动滑动条，图片的模糊度有了变化。以上就是用滑动条控制图片模糊度的简单介绍。
40纯人代码
04:12查看AI文稿AI文稿这个视频我们介绍两种方法，用 gs 实现返回页面顶部的功能，现在呢，我下拉页面在右下角呢，有一个返回顶部的悬浮按钮啊，我们点击一下它就可以返回到页面顶部。 除了返回页面顶部，还可以随便返回到页面任意一个位置，像以前类似的功能呢，可能会用到锚点， 但是锚点的定位功能呢，没有用 gs 灵活，并且对页面的链接多多少少都会有点影响，比方需要后退到上一个页面呢，可能就会有问题哈，这里我们说一下用 gs 怎么实现， 看一下代码，页面布局非常简单，用了八个地方来模拟页面的内容，还有一个返回顶部的按钮，现在下拉页面点击这个返回顶部的按钮呢，是没有效果的，我们来学一下 j s， 这里会给大家介绍两种方法，先获取到返回顶部的这个按钮，监听一下它的点击事件， 然后来看一下，当点击按钮的时候，希望页面它返回到哪一个位置，这里呢一共有八个点， 比方我希望页面他返回到顶部呢，其实就是返回到第一个地府的顶部，对吧？所以就要先把第一个地府的对象呢获取下来， 第一个呢就是这个集合里面的第零个哈，然后呢用一个 score interview 的方法，里面呢给他传一个对象，这里用 blog 这个属性值呢，用 start， 那也就是起始位置的意思啊，就当我们点击这个按钮呢，页面他就会返回到最前面这个点，他的起始位置，也就是呢返回到 页面的顶部了，下来页面，然后呢点击返回顶部这个按钮，对吧？瞬间呢？跳转到页面的顶部了，但是这里呢，他是瞬间跳转的，没有一种平滑过度的效果，如果希望有过度的效果，可以加上 behave 属性值是什么， 对吧？现在就有过度的效果，慢慢的滑过去了。除了返回到页面的顶部，还可以返回到页面其他的位置啊，比方说现在呢，我要控制它返回到第三个 diff 的顶部，第三个 diff 也就是这个几何里面下标为二的这一个 滑动页面，再点击按钮，没有问题，现在就是返回到第三个地方的顶部了。 block 的属性值还可以用 and， 那是元素的其实位置，也就是那顶部，那 and 就是元素的底部。比方我要页面滑动到第六个地方的底部，也就是那下边为五的地方。滑动页面 再点击按钮，没有问题啊，他是页面的底部对齐了，第六个底部的底部是这样子来对齐的，哪怕呢，你是在前面再点击一下按钮，他也是滑到第六个底部的底部。好，再来说一下第二种方法， crying to biu， 这个方法是我们希望页面滑动到哪个元素上面的时候用的，就要获取到对应的这个元素对象。 再来说一个方法，这个方法呢，就不是控制他滑动到哪个元素上面了，而是直接控制他在熨斗上面来进行滑动。方法呢是 scroll two， 参数呢，同样给他传一个 对象属性呢，就要改一下，这里不用 block， 改成用 top。 如果希望返回页面的顶部呢， top 就为零，越黑越这个属性要保留，这样才会有平滑过渡的效果。 滑动页面再点击按钮没问题，同样可以返回顶部。那如果现在我不需要他返回到页面的最顶部，就返回到第三个 tiff， 这里可不可以呢？同样没问题，我们只要计算一下前面的高度就可以了，也就是呢前面两个 tiff 的高度， 这里一个地方的高度呢是三百五十像素哈，两个就是七百，所以这里呢就写七百就可以了，不用写单位的。滑动页面， 再点击按钮没有问题，同样可以滑动到指定的位置。好，这个视频我们就分享了两种方法，实现页面滑动到指定位置的，感谢大家的收看。
523小K师兄
04:56
