00:00
好,我们看一下,我们今天要干嘛,好来看一下,好,我们今天就要做一个东西叫。花屏实力是不是咱们从这个华屏实力身上,我们要把我们以后写移动端项目的套路跟PCR区分开来啊,这是我们最终要做的,叫无缝花瓶。啊,反正你要知道。知道好像没看见东西是不是。为什么我看看。不要换,不是换一个浏览器的问题了啊诶。什么鬼啊啊,我看看啊,我这人。比较纠结啊,有对的,刚刚不知道怎么了是吧,OK,好,你看这个是不是咱们什么自动轮播吧,看他是不是无缝的。无缝的是不是,然后呢,看可不可以划。这你们披萨有没有做过?
01:02
这肯定没做过吧,是吧,而且大家看。他滑是有逻辑的,我滑一下不动,你必须划过1/2他,他才会过来,是不是啊,陈奕迅比较帅吧,好,这你说过来了,而且一一开始咱们写的所有的无缝花瓶。啊,或者叫轮播图,我们只考虑一个方向。是不是只考虑这个方向好,到一端不一样到一端我们要考虑两个方向。想想为什么在移动端要考虑两个方向。你看你们PC的项目这个轮播图是不是自己在一个方面滑,就是你这个轮播图的效果会影响其他效果吗。不会吧,可是在移动端不一样,移动端我们是不是满屏都是滑屏啊,是不是,那我问你,那问你,我在这个轮上,我树下滑。
02:01
我到底应该触发轮播图的逻辑,还是触发我最终竖向滑屏的逻辑啊?竖向滑逻辑吧,那这边是不是有一个冲突能理解,那这种冲突在移动端叫做防抖洞。啊,这是我们在把,如果你单独写一个DEMO,你是遇不到这个问题的。除非你把这个单幕干嘛放到项目里面去,你就看到这个嘛,轮不出了问题理解吗?啊,所以说我们终极的目标是要干嘛。实现一版防抖动的无缝花屏,对不懂,那今天咱们的目标是把先把这个什么一个方向面这个什么无缝花屏给他干嘛做出来,而且我们说做这个东西还能用定位写吗。不能用定位写,为什么不能定位写?为什么在移动端不能用定位线?我们说P3做无缝画面是不是干嘛一直left的拖把?是不是想想我们之前写滑屏的时候啊,不是写滑屏写轮播图的时候,不管是3D轮播图,还是你们一开始写的杰的那个什么原素萝卜多或者是杰或者什么不是叫法,他们内部操作的都是什么?
03:15
Left top是不是可是top这种属性。一旦你改,它就会发生重坏。重排。移动端你如果划个轮廓,滑一滑就没电了。行吗?不行,懂吗?说在移动端做这种东西一定是使用。什什么东西跟level比较像呢?什么东西跟left和top比较像呢?全是风全不全的外吗?你就使用全的全的外。做这种效果要比使用left跟top代价来的小很多。
04:03
啊,为什么小很多不是说全世界的X,全世界的Y不会触发重办,他们也会。可是圈X圈外,它有自己的图层。什么叫自己的图层?我们是不是在做那个?这就那个3D的那个照片墙时,我们看到过图层啊。有没有看到过图层不是有一个个图层的吗?3D效果的吗?你想如果从会从白是单独在一个图层上面去触发的话,那这个影响是不会效果。是不是,所以说我们的圈的X跟圈的Y,它是会单独去开变图层的,它在这个图层上面,它会自己去单独进行绘制的,能不讲,所以这个时候它重回重盘的话,就会只会影响它那一个组织的重回重盘,所以它的性能要比拉跟托来大。高,而且不是高一点点。懂吗?懂不懂啊,所以说我们这个东西啊,我们会先用定位,先把这个最最基本的价值给他写出来,然后一定会改成。
05:06
陈凤跟。啊,改成96X96的Y了啊,可是为什么先用定位写呢?因为一上来如果就用奥T去给大家去写的话,可能很多坑的话,你们就是。意识不到,不是说意识不到你就不知道怎么去解决这些坑,能理解吗?所以我们从这个定位板慢慢的过渡到。奥迪变换那个版本啊,我们来看一下整个过程当中我会遇到一个什么样的情况,而且最终咱们做出来的东西大家看。有没有看见?你看这是我们的无缝花瓶吗?我是不是只写了几个结构?啊,这个是一个容器啊,他说我需要你无缝,需要你自动的去轮播的,是不是这里面有个什么。列表对不对,以后我只要写这个结构。就给我出现分化品。跟我们的不跟我们的不算像不像我们在不是里面写,是不是也是差不多的,是不是给他几个指令。
06:07
然后它就会有一些动作出来,对不对,那咱们今天写的时候,写的封装度稍微高一点。懂吗?不再像之前写那些东西的时候的话,我们不做封装了啊,最终我们要封装出一个库出来。啊。好,那就是这个东西啊,这是我们今天要实现的一个啊,一个无缝滑屏的组件啊,OK,好,那我们从最简单的这个。布局开始写起,OK,那我们知道这个东西我们要不要写的很通用。要啊,那我们写,写起来那就不一样了,我们来看看OK。好,我们先把这个最基本的价值,我们先来答一答,OK。零四吧,搞个就叫无啊,切记啊,以后说移动端的轮波图,不要叫他轮波图啊,叫他无缝华平啊,这样逼格高一点啊,因为你每次跟人家讲轮播图轮播图的话,他就会觉得好low啊,你讲部分滑屏的话干嘛,那就不一样。
07:12
啊,虽然说它还是本质上还是一个轮播图,可是叫法就干嘛不一样啊,离咱们来先做什么。布局。好移动的套路啊,我们来完整的写写me标签name,什么view port,是吧是吧,Content等于de device,然后呢,等于1.0有。杠,C等于no是吧?好,那写完之后,然后这边是什么,怎么写document.and listener,在你他切star的时候来一个function是吧?Function的内部怎么玩E。
08:12
是不是还可以用什么EV等于E,或者是不是E点什么我问。是吧,OK,那写完这个东西之后我们来看。好,那后面这个东西的话,最好是什么?window.on road。等于一个方形,当然这个东西的话,你也可以放什么。放在里面,看它放到里面会不会有问题啊,我觉得在有些浏览器里的话,你放里面的话,可能还真会出问题看看。我不知道现在还有没有这个问题啊,不知道。说下。是不是没问题了,OK啊,之前会给你报一个很很奇怪的错啊,OK,好,反正现在没问题,我们就不管它了,好了,看好,那咱们干嘛来一个是这样是吧,好看这个东西让你们做,首先你看到几个结构,就是就你现在看到这个无缝花屏吧,在你的眼里他应该长什么样。
09:20
肯定长这样是不?你看到这个效果跟别人看到效果应该不一样,是你应该一眼可以把他忘到底。是不是就是个障眼法嘛,是不是啊,OK,那干嘛,我们写一写吧,好,而且我们知道这个玩意在PC的模拟器里面是不是会出问题的,是吧,我们说这个玩意是不是有个很大的隐患的,一旦你写上它了是吗?所有的滚头条都会失效掉是吧,反正会失效的,干嘛我们上来先自杀一下,干嘛干嘛不璃,反正你待会滚动条会干嘛失小掉的,那干我自己先把自己干掉是不OK,好那一般我们说这边我们要一个结构吧。
10:17
是不是,是不是让他来充当什么玻璃的作用呢?是不是,那这个叫什么,不是不是,那也是一模。一样的代码,那没讲好,那差不多股价大完了,是不是,咱们是不是没有选选那个是配方啊,百分比是对。这边我选这个百百分比识别方案吧,咱们先写一下吧,是不是,然后以后我问你百分比识别能不能跟I识别混合在一起用啊,可以吧,是不是啊,OK,来看一下,好,那这个结构我们就要出来了,好,这是最最大层的这个外吧,OK,好,里面应该有个Di。啊,写到里面的话都给拉吧,好,那这个外婆给什么。
11:02
是不是也得有个波过去啊,好轮波动,怎么说呢,ER Co。是不是他?这是不是代表轮播土地上这是课程的意思吧C。呃,这个还是。是不是?是不是他扩扩手来看一下。3W点百度点。com。旋转木马。啊对,就是选择木是不是轮廓图吧,OK,然后干嘛,我们叫他什么不要可不可以啊,因为你知道我们待会要去写什么,是要把它写成一个组件的啊,说这个命名得干嘛。友好一点,懂不懂,不然的话人人干嘛。第一,看不懂这些,干嘛不想用,我说我这个叫打补告万法谁用啊?那没讲,你最最起码告诉人家这这是啥轮播图吧,是吧,哦,这是轮播那个包裹器嘛,是吧,OK,好,小圆点咱们先不要考虑啊,OK,那先把这个布局做了,OK,大家想这里面应该应个应该是一个什么样的东西。
12:14
U是不是U应该有几个Y?我问你这LYY能不能写死?这LYY里面写死不能,这个LYY应该跟你图片的个数是一样的,这个图片很有可能在后台。是不是?所以图片有几张LYLY就应该有几个,所以最终这个LY的结构肯定是通过JS生成的。是不是和咱们先把这个样式给他干嘛勾出来嘛。以后再拿用GS来去生这个LYY嘛,是的好,LYY里面是什么,大家看应该是图片,可能这种图片一般都是可以点点击跳转的,所以一般都是一个什么链接图片。是不是OKJCD冒啊很号是不是啊,这里面放什么。
13:09
是不是呢?SC现在是不是没有啊,干嘛去拿一下呗,是吧。滑屏实力好,把这个图全部拎过来是吧?那这个图你们可以换啊,这个图我已经几百年没换过这个图。OK,好,Image底下的什么01点绝笔吧,几个15是吧,0102。0304。也有不好,CTRL1保存,大家来看一刷,哎,就像这样。是不是OK,然后呢,一些默认钥匙给他清一清,因为是LY嘛。是不是因为是,应该怎么办?清除默认要是吧,我给一个叫做list,是不是我说你这个什么。
14:08
点。它指向什么点?List是不是OK干嘛?List style等于什么no,这这个能不能理解啊?那最好写CS的样式多格吗?如果样式比较少的话就写到。一行去啊,这样的话我们也好改。OK。好,让他全部去好。好。上面这个我们就不管了,是不是啊,然后想想呃。好,因为待会是一些链接图片嘛,那套路就应该出来了,懂吗?A,标签跟阴麦健康马display display为什么不block吧?能不理解啊,好,那怎么办?因为我们说写组件有可能有人写默认样式这句话,就不会写这两句话嘛,所以这些东西的话,我们全部写到组件内部去。
15:11
类似叫什么L吗?叫什么A码跟什么。跟这个啊。跟这个什么image啊,他们统一什么display block,好所你你看空隙是不是就被清掉了,你看没有这一行的时候,大家看是不是有一个空隙的啊,这个三小时空隙啊,给它清掉好给他清掉之后大家小好,我们这个图片是不是要自适应的。你看我现在图片是不是太大了,怎么样图片支持一样。这张一卖应该怎么办?怎办?外应该有什么版本吧,可想你这个外跟百分百大看这个A标签,外跟百是应该拿啊,一卖的外白是不拿这个啊A标签的,可是A标签身上有外吗?没有,那是不去找L,看L上有没有外。
16:15
Y,我给他指定关系吗?也没有去找。List啊,是不是从头到尾都没有,都没有怎么办?A标签,那他自己的什么。诶,你看外为白板,首先我们说你不写外跟白板的话,A标签是不是拿自己的位图像素这个值啊。放进来,一旦写了百分百,他是不一层层往上找,直到找,直到找到谁啊。Border。是不是为什么大什么现在我问你我这个。一卖往上找A标签有没有指定宽度啊,没有L有没有有没有,都没有,最多是不是都拿,拿什么是是不坏的宽度啊,老师说一一般节的宽度是不是最重要的是初水棒块的宽度啊。
17:03
能不能讲就是你找不到,因为我没有给它默认指定宽度嘛,就一层层往上走的吧。这个百分比能理解吗?OK,好,那我们再来看好,现在他们是不是在,最起码这个尺寸应该对了吧,他们是不是得去。一行,那怎么办?说的LY干嘛浮动起来吧,是不是想想所有的LY浮动起来就能去航了吗?那么你ul的宽度的话,是不是得干嘛得够啊。你现在ul就干嘛,就这么大,我们来看一下。你看你腰的宽度。高,因为下面都是什么浮动元素嘛,它没有轻浮动嘛,你看你的宽度是只永远只有410这么宽啊,那你想想LY能。去一排吗?去不了那怎么办?
18:01
他的宽度不多。我写500%行不行,是不500,可是这个500最终我们肯定要把它弄得很动态,是不是OK只点来看一下500%,诶你看ul是不是2070对不对。没问题啊,LYY是不是变大了,为什么?你的Y是百分百吗?是不是你看你的,因为你历历史的外史为500%嘛,LY就不是去拿这个历史的嘛,然后你一层层拿下来,你这个一般就百分百,是不是也是拿到这个百百分之五百,所以说其实我这个LY每一个LY的一个LY是不是应该我这个UI的1/5啊,所以它的外层该有大。500的1/5嘛,多少。百分之还是20%啊,20,你要知道,在L的眼里,在的眼里,这个历史的永远是百分。
19:05
白。懂吗?啊,这个其实是真的很容易犯错的啊,确实很容易犯错,因为你们写样式是个特别容易犯错,这个值不是百分百啊,不是500%乘以1/5啊,啊,因为在LY的眼里,这个例子永远是百分的有讲,所以说20%算一下来看一下这个LY是不是已经距离。是不是去了一行了,好去一行之后再看这个1万。要高度没有被撑开了吧,那是不是应该把U2的高度撑开了?OK,在哪撑开U2的高度啊,浮动啊,是不是清不动,移动来清不动就比较简单了,Overflow什么hidden,没有IE嘛。你不考虑的话,你就直接对不懂,OK,这里刷一下看是不是就出来了。这个能不能讲好,可以说这种东西的话,应该是满满足不了我们的现在啊,因为我们要写的很动态好,那应该怎么办。
20:03
改改,最起码这个样式已经定下来了,是不是OK,只要CTRL02。好,把这个东西写的更动态一点。咋写?U底下能有这些东西吗?就连这个U2都小雅可以省略掉。是不是我就告诉你,你干嘛,你给我写一个包裹器啊,里面这个结构我来帮你生成,只要我页面上能找到这个东西啊。我就可以去帮你生成内容。是不是那个怎么想,首先得有这个东西吧,没有这个东西的话,我这个脚本要不要好。不要吧,那首先我是不是得去找一找,有有没有这个玩意,就什么我们这个cos什么。外是吧,首先你得有这个包裹去吧,等于什么来的,找一下什么全局有没有这个。
21:07
好,你能加吗?你前面能加外吗?不能,你哪知道我们编码起来的话,我外面这个包裹器他叫什么,有可能还没有包裹器啊是吧,好走你那就看下有没有这个S是吧,那走你好叶,如果他存在。扩外部存在,那就好写了。咋想他是什么?它是什么?它的点音呢?HT应该等于什么?一个幺二吗?是不是就把这个内容干嘛扣过来就行了,想想。只靠一个就行了嘛,是不是啊,嗯,首首先这样,首先我们外面应该有一个。
22:02
Ul是吧,那这样那个嘛,我先一个ul,一个ul等于什么document.create element u是吧,然后呢,U点什么点,呃,最终我们知道他要去哪的,外底下的是吧,那么叫扩S外点是不是去加这个U是吧,只不过在加的时候我们想应该怎么办。点音呢,秒等于什么字符串这个字就是我这个是吧,Tlc。好,CTRLV是吧,只要你上去嘛。是不是,嗯。删多了。说你啊,这里面得稍微的仔细一点,咱们是不是在拼这个结构啊。OK。好,在拼的时候的话,我们说来看看应该是有问题的。
23:04
好这个哈,应该用什么,就这样吧,我们最外面应该用什么单引号吧。这没用代号是不就行了,完事吧,只不过这个图片地址应该是从哪拿的。啊,图片地址怎么来的。图片的地址的话,百分是在后台的,你要发你要去发请求的是吧,那这边我们先拿一个数字干嘛,先放一放是不是OK,等下这个数字放在哪。放在这个放在里面还是外面。这应该都行,是不是?反正都行是吧,OK,为什么麦就底下的,什么阴麦就底下的呀,零一.jbg。
24:04
J笔记吧,是不是逗号几个?先复制五个吧,CTRLC23好了,0102。Lisa。This。零五啊,除了一些固定不会改的图片,你们会放在这个项目的目录底下,其他都要发请求去拿的。懂吗?OK,让我想想,那这个这个里面怎么想,我们要建几个。负循环Y什么I等于零是不是I小于什么l.a点想想有没有可能用户你起的这个AR他。拿放这个地址的这个这个这个数字名字不叫A。
25:00
有没有可能,肯定有可能的啊,减S就是什么函数化的编程嘛,是吧,干嘛我就来个。哭什么是不是啊,我不管你,我不管你取什么名字是不是啊,你自己给我传进来,反正我的行参叫A。John。是不是,我不管你外部取什么名字吧,你随便写,你想用我轮波腿的话,你肯定要掉的。是吧,你掉的时候你自己传呗,是吧,OK,这里好,那这里面我们就可以去放心的写了,是不是点认识。然后呢,加加是不是加怎么办?Ctrl a刚不有三了,应该什么它的什么因呢?H等于加等于是不是又得填一。
26:01
CTRLC是吧。CTRLB,好,应该都是单影,外面是不是给单影啊,对,那就差不多写出套路来了。OK,这个应该也是单影,一个单影就够了吧,OK,这里上去。上去找你上去,然后呢,改谁改这个src吧,是不是OK,只要你来个什么。一定要先给单影再加加吧,是不是啊啊,这个不能忘啊,这个双赢本来就有的,懂吧,好那干嘛AR点什么啊,应该是这个呀,是不是AR什么?哎,完事结构应该拼出来了是不是,看看这个结构有没有拼出来,对调一下CTRLCCTRLCTRL来看一下。
27:00
零二,好,应该出来了。刷一下,可是好像样式没有用上。Ul应该叫什么?叫叫list吧,那我在这边去创建这个129干嘛,他点什么。Class。点,其实直接看STEM就行了,因为这个结构是我们控制的,是不是也行,我们干嘛就爱吧是吧类。双向你看是不是就出来了,看一下这个,首先看这里面cos外,再看里面的。Ul再看里面的LY都没问题是吧,那有些同学哎,这些样式要不要直接在啊,通过GS生成。啊,500%是需要的,20%也是需要的,其他应该不用吧,是吧,以后我搞一个电子表文件不就行了吗?是吧,我说你要使用这个轮播图的话,你看像我们用那个不实物的话,你是不是得引CSS,然后再引它的一个。
28:07
再引几块,再引几S啊,那咱们也一样呗,用的时候的话,你先得引一段样是呗,是不是还得干嘛。引我一段脚本吧,那这个脚本是不在这。能不解,最终把它分投到一个脚本里面去不就行了吗?是吧,那下节课咱们把这个样式里面的动态部分也给他写了,那最终咱们把这个最基本的一一款划屏给他,干嘛?先画出来,能理解吗?好,先下课歇会。
我来说两句