00:00
来,我们先来看一下第九个啊,这个有点小难度。得扛住啊。是个什么功能呢?给大家演示一下。啊,功能看起来也很简单,但做起来有点小难度啊。嗯,我把这个给怎么透。过几看这里有个这个功能。就这一个啊,不是这个这个就当我我这里面有一个向右的箭头,有一个什么向左的箭头,看到了吗?这个地方怎么回事呢?大家看到啊,这里面有一些变化啊,这一个按钮是不是这边你看现在能点吗?灰色的不能点,为什么不能点,因为左边没有了嘛。
01:00
我显示的这一个是不是已经是第一个了,那这个为什么能点呢。是不是右边还有啊,那右边没有了还能连吗?不然它的样式是不是要变呢,对不对?好,当我向右点一下,你说这个按钮变不变,变不变,我点一下向右的按钮,这个向左的按钮,它的颜色发发变化会变吧,因为我一旦向一旦点一下向右,这个整个是其实上向左移动啊,向左移动我第一个显示的就不是第一张图变了吧。那他是不是就可以点击向左和图片向右移动了。对不对啊,对的,还有一个事情,你看我点到这个最后了,还能点吗?不能点,而且我每一次点击移动的距离是不是固定的啊,移动的距离就是固定的。嗯。这个功能啊。
02:02
我们来去再看一下这个里面的。看一下这个里面的这个情况页面的情况啊,来定位到这里来。那干啥?首先呢,我们来看一下世界都加在谁身上的。事件。大家看了吗?事件有几个实在现在我们事件施加的这个身上吗?不是我们现在不做这个效果,不是做这个效果对不对,我们现在做的是这两个按钮的这两个A标签,相当于思是大家看看一个叫backward,一个叫什么forward。啊,相当于这个是什么,向右的那个箭头是不是我要想看右边的图片嘛,是吧,啊实际上整个是不是向左移动,能不能懂整体向左移动。
03:00
好,谁在向左移动这个里面。看一下哪个标签线做移动ul对很好,Ul其实跟我们轮播图它没有两样,是一样的,只是说我同时让你看到了多张图片。是不,而且还告诉你这个变化,瞬间变化了,就瞬间移动了。这个没有必要动,它慢慢移动没意思,你我们那个轮播图,这图片比较大,是不是比较大的时候,那就是连续移动,我这个瞬间移动就够了。好,我们刚才说过了,这个按钮是不是有颜色变化,颜色变化怎么变的,大家大家想想,你看呢,现在我那向左的那个按钮,左边的按钮是不是灰色的,灰色的用什么大家看到,那我要把它变成有颜深色的,我该怎么做?把这个给了什么?变了没有?
04:01
变了没有变了,但变了以后就代表我点就会移动吗?现在是不是有问题。是不是?能看出来吧,现在现在他他的估计他的判断方式是什么,你就想你觉得他的判断方式什么,就看他其实你看按全来说不应该移动,你这样,你这样整,你看他在动。是不是能动吗?不应该动对不对,说明它的判断方式是判断我这个向左的这个按钮,它现在是不是disable的是吧,如果如果是disable的,那是不是就不乱动了,但是我故意的是不是改了一下,本来应该是什么应该是disable的,肯定他现在就什么是不是动不了啦。能不懂,也就是说能不能移动最终是通过GS来控制的吧,并不是本身这个按钮不能响应,超响应点击,它能响应点击的,能理解吧,它是可以小1.1只是我用通过GS控制。
05:08
好,首先大家也知道我们在点击过程中是不是要改变这两个A标签的样式,Class是不是好,除了改变这个A标签,Class还要改变谁去?还要改变这个ul的什么,是不是它的来不是它的宽度,宽度啊是一个固定的一个设置好的一个值啊,它的什么是不是要指定它的life的属性值,大家看每次变化多少对吧?62为什么是变化62了,这个得看一些东西了。大家觉得是谁的宽度?是I宽度还是宽度?Ii的宽度大家看啊,这ii是多少,是62啊,看这个图片是多少50,你没看见那个图片跟那个跟之间有距离吗?能不能懂啊,Ii的它肯定要以ii为整体,是不是进行移动啊,以ii为整体进行移动,那也就是说我再去点击向左或者向右的按钮的时候,它的这个ul的M值是不是在发生改变,而且以多少为单位改变,是不是以62的项数为单位来改变?
06:36
听懂不好,而且我点向右是。减小还是增大?向右点,这个向右是减小吧,应该他要向左移动嘛,对不对,既然向左移动嘛,那就减小了嘛,那我要点击这个向左的按钮,它是在什么,是不是增大,而且增大的每一次是不是就是四十六十二呀,以62为单位,那个怎么办?嗯,行,那现在呢,我们就来去准备来去写一下。
07:16
怎么像卡死了似的?来啊,就这啊来,我把我的我们要操作的东西呢给它整一下,诶从这里开始。我刚刚我一再跟大家说过了,先找到那个附近的ID啊,如果他本身没有ID的话来。嗯,差不多。就这吧。复制。新建。给它稍微拉大一点点。哎,那没了。
08:05
好吧,来,下面首先我们要想到我们要给谁加监听呢?啊,其实非常简单,是不是给那两个A呀,啊给这两个A啊,关键这两个A怎么找到呢。是不是先找到是不是它呀,接着从它通过它是慢慢定位到这里来啊,现在找到起始位置啊,而这一个加的也是什么什么先定很简单嘛,点击嘛。是吧,好,下面我们要去改变哪些元素的。Do的一些数据了。来看一下,首先我要不要改变,改变他们要吧,也就说我在点的时候就要改变他们,好下面呢,我还一个要改变的是不是它呀,是不是这个ul对不对,改变它的什么样的属性数据呢?这个是不是它的class,这个是不是它的那个life的值。
09:16
是这个意思吧,嗯,行啊,别看着啊,这个地方还有点小麻烦的啊,来,我们来去写一写,看着好像很简单。那我们这里面定一个定一个函数,那我现在是不是移动那个图片呢?那我叫什么木小图片,小图片怎么说啊迷啊迷行吧,迷你迷你图片img可以吧,嗯,空格行把它呢,给它调用一下。好,我这两个图片是不是要分别去加点击率是吧?啊,那我怎么样找到这两个A标签,首先找ID,接着找下面的什么一标签,接着是不是找这两个A。
10:17
一个是first,一个什么last可不可以可以,这没问题啊,来试一下,那首先我要找到那个as。啊,怎么找的来,首先是有一个ID叫preview,诶这次怎么提示了。啊,Previe接着是它下面的什么标签,一下面的一下面的什么A,但是呢,我们重点不是搞这个,是要看到那个什么。第一个孩子是吧,就是那个吧,一个是pray,一个是backward,一个什么forward,取这个名字好点,因为他的名字叫那个吧,Back,呃,达。
11:06
是A吧,啊a word等于什么?多福as点啊,这是first last,看一下是不是first,这一个相当于是不是左边的那个按钮啊,下面这个是右边的按钮,点first。再一个什么for word这么写了吧,等于多了as.next好了吧,好,我要给他们俩都加什么点E,听,这是什么?我们先来以forward开始啊。就forward能做那个,那那个那个back word是不是一样做啊,我们先做forward forward是不是向右啊。就是点击右边的按钮,我们要做什么呢?大家看啊,我们现在要做的事情啊是什么呢。
12:09
这个事情还挺麻烦的,我们先看一下我们的,还要还要看一下我们的,我们这个地方一上来就有一点问题啊,一上来就有有些有一些要统计,譬如说你看呢,一上来默认两个按钮都是什么,都是灰色的。是不是好都是灰色的,大家就得想啊,那我一上来是不是要有可能要更新这个向右的这个按钮,右边按钮的颜色样子有没有可能有没有非常有。为什么说非常要大家想我什么时候我要更新这个,就什么情况下我要去把它变成深色,我是不是有一个总图片的数量,对不对,我有一个总图片的数量,那如果我的总图片数量大于几。
13:03
它就是深色的大于起大于五啊,因为它显示一次显示几个五个,它显示五个,大家想如果我一共就五个,这个是深色的还是灰色的啊,是现在这个颜色还是深色,就是这个颜色,当前这个浅颜色对不对,能不懂,因为我没有要没没有动的机会啊。是不是你如果显示的是一个深色的按钮,就给那一种感觉,这个按钮可以什么可以点,可以点是不是就可以移动啊,你要想能够移动,至少要几张图片六张。对吧。能不能理解,这个要能理解啊,啊这个地方我们就要在做这些事情之前,先还要做一些统计工作,做一些记录工作,首先我们要定义一个变量叫什么呢?大家看啊,叫show看。
14:09
啊,这个是个产量是吧。等于几,我们当前一次性看几个,五个对不对啊,一次性看五个,但是我总共有多少张图片呢。看什么呢是吧,总共有多张图片。大家看到我们去看谁去,是不是看那个ii的个数就行,对不对,能不懂好,而且我们到时候是不是要操作这个ul呀。是要操作这个ul吧,那我可以把ul也定音出来啊啊,Ul也定义出来,嗯,这个里面它叫icon的啊,就是U也行。等于等于什么呢?看看我怎么找到这个,找到这个ul,它是不是ID啊,这个比较简单是吧。
15:09
哎哟,他跑出去了啊。是这个吧,好大家看啊,我怎么样知道我的总图片数量。握了一个啊,这个什么count,等于就看这个ul下面的什么点,Children,谁I他的什么。对不对,好,我们有可能要做一个初始化更新啊,初始化更新什么叫初始化更新呢?就这个地方,我们有可能要你看呢,这个一上来是不是就是深,就是这样一个深色的,是不是可点集的,那怎么让它可点集了,我怎么知道需要做呢?非常简单,就是看这一个值E,如果它大于什么啊去抗,那我就去做一件事情,把这一个forward是它吧,把这个forward。
16:24
点它是不是要设置一个class啊,那叫什么,它本身现在你看它有没有class啊,本身我们来看一下,本身我们看一下现在的对不对,它本身。有没有class?有,只是这个class叫什么forward disable的,我应该把它变为什么forward,那我能用class吗?不能不要用爱的class,应该用替换是不对,怎么样去替换以前的class啊,那你就要设置class啊,对不对,懂不懂你因为我们现在不是用的原生的嘛,你说老师我用原生的行不行?用圆心的做法不一样,原心做法就是先取到那个值,接着调用什么class name等于forward,对吧,我现在就不想运字。
17:18
嗯,来,请告诉我,我该怎么写。我能用吗?不能,不能怎么办?A,写什么接着了,Forward,把这个多去掉啊。可不可以可以没问题啊,两种方式大家都要会啊。好,初始化显示下面呢,我们就是给那个向右的按钮是保定金量向右按钮。
18:00
绑定点击监听好来这个里面麻烦就在这里面不太好做啊,不太好做啊,大家想为什么不太好做,大家想啊现在。我们要做些什么事情?回到这个图来。首先我们一点需要有几个事情,有两个事情叫做一个是移动,一个是要改变我们这个。按钮的那个样子对不对。好,来,首先。我们来看一下。你说我要去,我现在要改变哪个按钮钥匙。我们点击封号的是不是改变它的样式,这个好做,这个非常这是固定的,我一旦一点,我就可以把它改成什么。把它变为什么?是不是变成可点击的样式,那就是给它加整一个a drr,它的class为多少?它本来不叫backward,它本来叫backward disable的,它本来现在是在哪看到这里。
19:07
先看一下当前的它是一个什么样的状况。它现在是不可点击的,相当于那我要把它变成什么可点击的,怎么样把变成可点击的呢?能不能懂,能理解吧。好,那除了这个事,还有别的事要做吗?你。还有他你就说他自己有没有可能要变,有没有可能有,但是他是他自己是不是在最后才变,就最后一种情况才变,对不对,是不是啊,而且我们的大家还要还一个问题啊,我们的还有一个东西要变,哪个东西变。Ul是不是也要变?Ul要移动吗?是不是要向左移动,它的life的值是不是要变化,它的耐的怎么变呢?
20:06
减是不是减去多少啊,那你要减去多少是不是,是不是得去先得先取出它当前的呀。是不是能不能懂我。啊,OK,还有一个事情,这个点一定会有什么移动的效果。这考虑事情挺多的,他一定会移动吗?我点那个向右的,向右的那个按钮,右边那个按钮它一定会移动吗?不一定,那你说有可能不能移动对不对,所以说这个事情。先要做什么做判断,判断是否需要什么,或者说是否可以移动,对不对,可以移动啊,是不是需要移动吧,如果不需要,是不是直接结束,能不能不需要直接什么结束,那我怎么知道不需要呢?
21:08
那我怎么知道是到了最后了?能不懂啊,我怎么知道已经移到最后了呢?就是这种情况,看看这里就砰砰砰砰砰围到这来了是吧,现在是不是移到最后了,我咋知道移到最后了呢?判断什么,是不是要判断呢?值啊,其实我就我我就想了一个比较好的办法先呢,我这样大概啊,我先在外面取一个东西,去取到起始的那个,它开始起始的那个那个life的值为多少,起始的life值是不是为零,对不对,那向右移动一下,Life的值就为什么负62是不是我移两下了,就是它乘以二是不是,那也就是说我的APP的值是不是跟移动的次数有关系啊,我这里面我最后就想了一个办法,我在这里面定义了一个变量叫move。
22:14
大家看,大家还要记住啊,这个木框呢,而且有正负值,有正负值这个非常关键,就移动的四种。而且呢,向右为正。这非常有好处啊,用拉向左就什么按向向右,我按向右的箭头就为正,能理解吧,实际上为正的时候,为正的候它是不是向左移动了,62我这个向右啊,我是点击向右啊,点击那个向右的箭头,它实际上向左移动了。因为我们最终知道了这个的值是不是就跟我移动的数不相相关。能不懂啊,OK。
23:00
点击向右吧,点击啊就向右吧,向左,为什么回复啊,这个地方啊,一定要强调一个啊,我这个向右不是指的我向那个图片向右移动,而是指的什么呢?而是指的我点击一下向右的这个箭头懂不懂,好而且我们还要知道每一次移动,我也就是说我们一个啊,一个移动的一个宽度是多少,一次移动的宽度是不是62,这个实际上是个敞量,对不对,或者我可以求出某一个ii的宽度行不行,是不是我求出一个I的宽度是不是就知道了。那个它要移动的那个宽度对不对啊,那这个怎么写啊,我就写一个iiy的怎么求啊。啊,这个要求的话,要不然写成固定的,要不然的话啊,你可以我我看一下我我这个地方我要那那没办法了,我又要把这个字形变了。
24:06
啊,那还不如这样吧,这样快来,我去找他这个孩子,行不可不找他这个孩子,那首先找到什么?求准接着是什么冒号或这么写的吧,冒号或接着是求它的什么宽度,能看懂吧,好,得到它的宽度后,这是不是我一个每一次移动的宽度啊,每一次移动的宽度好了。每一次移动的宽度,有了它以后,下面看到我啊,那我点击向右,那我怎么知道到达了最右边。其实这个是可以做的。我怎么知道到达了最右边,也就是说这个值最多为多少?嗯,其实很简单,就一,如果说这个木count已经等于了,等于了几了,大家看我们有一个总图片个数,是不是有一个它的一个个数一是什么相减就可以了,是不是你就在想嘛,我的总图片个数假设是七,假设是七,这里面显示五个,我最多向右移几下,对两下。
25:32
那不就是相差吗?对不对,能不能理解啊,这个非常关键啊,也就是说我算成无count,如果等于了什么呢?我们的image count减去我的修。啊,那我们就直接什么结束嘛,不就嘛。是不是是,而且到了下面说明什么,说明我是不是需要移动,是不像是移动一个正的,还是移动一个负的。
26:10
我要更新这个木看的呀,正的不的,我们说点击一下右就是正的对不对,是不是。啊,点击向右就是正的,好,接着我要去做一些更新了啊,我要去更新它没问题。好啦,我要不要更新我的这个呢。这个分化的要不要更新,那不一定。不一定,为什么说不一定,你在想啊,你看我的一下它变了吗?变了没有,没有,只有什么时候才变,只有什么时候才变,最后一下,最后一个是才变。什么个意思?大家看到啊,我加加以后啊,我加加以后,我在这里面要判断一下,如果我怎么知道信号了呢。
27:09
哼,我怎么知道又来了,又来这个了,人说那有可能就要说我现在写出来啊,如果达到这个条件,说明是我移到最后了,是不是啊,是我移到了最后了,我应该做什么事情去?我应该把我当前这个forward变成什么,变成是不可点击的那种样式,那不可点击的样式怎么设置呢?哎,这个怎么写,首先是先什么forward是这样吗?不是这样的,代表的是可点击的,不可连接的,怎么说他有一个数,有一个名字叫什么disable的是不是这个对不对,不可连接是这个能不懂,有人说不可能,有人要说老师你应该你这两个判断一样的,你为什么不放到里面去。
28:07
你为什么放在这里,把这个。在吗?不行,你看着我中间做了一个事情,我中间什么加加的。能不能懂?能理解吧,我是增加一以后再去什么判断的。懂不懂这个是这一个是更新什么向左的十八九。对不对啊,更新向左的按钮,而这一个是去更新什么向右的按钮。OK,但是更新向右的按钮这个地方啊,我是写了一个条件对不对啊,必须要有个条件啊,你要没条件你点等于四,那就点不了了。
29:00
啊,OK,一旦我做了这个改变以后,下一次再点还能还能移动吗?还能不能移动,也就是说我一旦做了这个事情以后,我下次再点还能不能移动,为什么不能?你们就进入if了吗?能不能懂啊好,除了这个是还跟随是不是还有移动不变对不对,其实移动的是不是移动的是什么ul。是吧,这个ul怎么移动啊,来看一下ul实际上是不是给他设置一个class样式,设置一个样式CSS,它的什么值,是不是na的值,是吧,的值为多少。跟谁有关系?看点击次数,那点击是最终影响谁了?
30:00
他呀,刚才不是分析过了吗?就是看他呀。正点就是说看这个值和这个值。这两个字。而且是个正常父子。是不是跟它相反的负的,它乘以什么是负的,真的大家想假设我为一,假设我这个是为一,是不是向右,我点了一次向右,点了一次向右,我是不是向左移动62向左移动右叉二是这样过的。能懂吧,啊,其实这个forward写完以后,那个word是不是对着写就行。能不能懂,也就是说下面我们要去写啊,写什么呢?啊,给那个向左的按钮绑定监听。啊,大家看到啊,其实是对应的写就行,向左按钮保证点睛,那我要做的事情给谁去加减点睛呢?Backward是吧,点肯尼卡哪一个方写,而里面写什么呢?其实把它搞过来。
31:12
然后呢?判断是否需要移动。如果不需要,游轮结束,而这个值。也就是说,我的木抗等于多少,我就不能向左移动呢?我的不能向点向左等于几?这不知道吧,等于等于零呢。你就想了吗?一上来能向左移动吗?能不能?此时木看的危险是为你。对不对啊,队长就为你。啊,说这一个,这一个是啊至关重要。啊,你不要跟我说你想不出来,你你想不出来很正常,你要现在要做的事情就是理解啊,已经有了这个想法,好,那下面啊木框的应该什么减减,我这一次要先更新一下什么向右的箭头,向右的箭头来一个啊来一个什么forward是不是它的那个名字应该什么不叫word吧,叫什么。
32:25
Forward是不是好,接着更新一下什么向左的箭头,向左的箭头,那现在如果木看的先等于几变成等于几了,跟着写呗,对着写就行,那我就把那个谁变呢大个更成向左的箭头,叫什么back word给它更新成这个是什么,给它对着改就行。啊,都一样。是吧,这个这个用变吗。
33:03
用不用不用是不是总是在一个同样的算法。OK啊,我这样就写完了。啊,看的代码还是挺多的,挺唬人的啊,来看一下行不行。一上来是不是可以向右移动啊是吧,好,那可以向右,那我就。点一下呗,各位可以再点一下,应该变成不可点击了,因为我一共就八个组件。能不懂再点一下是不是这样吧,现在现在我点他了,走走走还能点吗?不能了吧,你好了吗。嗯。可以了呀啊,这个里面最最关键的一个思想,就是定义了一个什么木抗,木抗,而这个摸抗呢,它是有正负值概念的。
34:09
这个非常关键,你要没有正负值,那你这个定义看了没什么用。嗯。啊,这个稍微是有点儿难度,这个是倒数第二栏了。倒数第二栏就是第二栏。你们说还有更难的是,那总写的这么这么多,你一个蓝都没有,那不,你不是说太low了吗?好。
我来说两句