00:01
呃,我们上午呢,我们就现在去做一个做一个练习。这个练习大家应该做过是吧,没有?类似的效果做过吧,好了,就当他完全没做过啊。你可以换成你喜欢的图片啊,反正这是我喜欢的图片。
01:05
啊,这个页面和样式呢,就已经就写好了啊,但这里面呢,说一个说几个关键的点啊,大家看到。先我们来对这一个布局和样式做一个简单的说明。首先啊,这个中间的这一个部分呢,这个外部有一个div看到了吧,这个div只占哪一部分呢?只占这一部分能不懂,也是它的宽和高,你是不是有线在它的限定了对不对,零和凹度这个什么,这个实现什么效果,是不是居水平居中啊啊水平居中好了,这一个啊overflow等于黑的。什么效果好,这个就得看下一个了,大家看到下一个,你看下一个啊,这个地方啊,这一个里面的这个div list。
02:01
它的宽度3500,一共这个地方它有几个image。五个五个3500,那每一个是多宽700,那700啊600吧,700啊不好意思,700怎么算的呀。啊,六六五六三十,那就这里面写的有点小问题啊,这一共几个。五个五个每一个应该要,每一个要跟它的宽度要正好是吗?正好一样啊,它刚好显示吗?那就是我写的有点小问题。看一下啊,6656应该什么啊,六我现在是五张啊,现在是五张。这是这数学的小算法都算不了这五个。不五六三十嘛。这样的话才是刚好是好的。
03:01
再说一遍啊。对吧,那也就是说大家看看啊,我们的这个div实际上宽度是不是比外部的这个content的div是不是要宽呢?但是你看见所有的图片了吗?没有原因是什么overflow等于什么黑的。是不是就出来了?好,那下面我就要问大家了啊,我想让这个图片动起来。该怎么办?给我的这个的添加什么属性。添加什么属性?对我这个list list的这一个div添加什么属性,这个属性的。那的属性假设我先为零啊,我先为零。平相当于是不是跟没加一样,那下面啊,我要想让看到啊,我要想让它图片向左移动,我应该是增大还是减小减小啊,懂没有。
04:16
是不是在动?看到吧,那翻页是怎么做的,是不是就是让这个life的值不断的减小或者增加呀,如果是减小,那就向这边移,向左移对不对,那如果我增加了向右移。先把这个基本的道理搞清楚。我要向。我问大家一个啊,我要向左,向左翻一页,我应该移动多少是吧?600,那是正的600还是负的600,负的600吧,也就是说我要看到下一张图片对不对?我要看到下一张图片,它不就像左移吗?
05:05
能不能懂,也就是说我要翻到下一页,它需要耐的值要减少什么600,要减去600对不对,那反过来说,我要向点向左看到上一张图片呢。我要看到上一张图片,它实际上耐的值是增加了多少,增加加多少也是600。大概道理懂吧,你只要懂得了这个基本的道理,那后面的事情就好办了。啊,不过呢,最终我们的这个这个这个肯定还是要overflow的是吧。现在说看来这个中间的一个状态啊,再刷一下啊,这个呢是已经写好了啊,它有哪些功能跟大家说一说啊,首先最最基本的功能是点击这个向左向右的按钮。
06:08
能够翻页,向上翻页或者向下翻页,那除了这个功能还有什么功能呢?啊,还有它能自动翻页。能不能看到每隔三秒钟,就如他假设它每隔三秒钟,或者这里面我好像涉及的一秒钟啊,每隔一秒钟或者几秒钟,指定的秒数,它就相就翻到下一页。而且他还是循环翻译什么意思。现在我在最后一页。啊,我点一下向右呢。进入了一页第一页,而且是连续的看到,诶这个怎么做到对吧,如何能做到我的右边,也就是说我现在看到最后一页,其实右边页还有六页有,你没有的话怎么能连续呢。
07:06
大家想啊,如果没有的话,他就不可能连续的出来。看到了吗?右边有没有,是不是有一张啊,对不对,这而且这一页这一页图片是第几张图片,第一张图片能不能看到,好,那接着要说另外一个事情,我翻到第一页左边有没有图片。第一张图片的左边有没有图片?有,他是第几张图片,最后一张图片。也就是说,你想想看,我们最终你看到我这里一共有几张图片了。七张图片,但实际上真正只有几张,五张大概呢,本来我是这样一个五张图片,对不对,本来有这五张就够了吧,但是我为了能够实现循环翻页的效果。
08:13
我在最左边加的是第一张图片,最后一张也就第五张,是不是我在最右边加了什么第一张?这老师这么一加就能连续搬了,当然可以,就看你能不能想出来了,对吧,啊OK。这个东西有时候就是你要找到解决办法是最关键的。好,你说诶,你看啊看这里。我怎么样才能连续的话呢?譬如说举个例子,假设我当前看到的是这一张。就举个例子来看的玩,看着我假设当前看到的是这一张。那而且呢,我点向右翻页。
09:02
那我现在看比啦。看第几张,第一张,因为我当前看到的是5.1版,对不对,5.gp,那向下方是不是看到1.gg,但是我能跳到这里吗。我能停在这里吗?我能不能停在这里?为什么不能停在这里?我为什么不能停在这里,我要停在这里右边还有吗?没有了,那你该怎么办呢?对吧?我就偷偷的默默的背后一旦发现我现在当前跳到最后一张,跳到这个最后一张,那我就瞬间蹦到了一张去第二张。这是第二个位置的图片。他们俩是不是同一张,是不是用户能发现吗?不能用户发现不了,因为我我跟他说过了,你去改变那个name的值,它是瞬间改的。
10:02
那么呢,用户根本就不知道你已经跳到别的位置了。用户哪知道这个是用户都是摆设。嗯。你或者说或者说什么叫一个好的应用,就是让更多人觉得你这个应用好,让白痴也能觉得,诶反正随便点点诶可以对吧,你不能说还要用户思考这个案钮我能不能点,这个按钮我要不要点啊,你不能是你老让用户思考才能点击正确,对吧,尽量让用户少犯错误,这样的应用才是好的应用。好了,那有可能我当前已经到了这个1.jpg,好,我有可能是不是点击向左。有没有人有,那我点击向左看到的是哪一张图片,图片五,那是不是会跳到这里来,关键是你能停在这里吗?不能停在这里。你要提到这里向左就是空白了。
11:02
能理解吧,那这个时候很简单,我们瞬间跳到哪里去?倒数第二张。用户看到的还是5.jpg。这就是为什么我在左边和右边多加了,一共多加两张图片。这样是不是实现了一个平滑的循环翻页的效果?对吧。大概思想能不能懂啊,先你要明白这个道理,咱才能做,你要这个道理都明白不了做,写代码没有意义。下去以后你也要自己分析一下啊,凭什么我这种方式就能实现一个循环的一个效果。好。来啊,那下面呢,我们就准备来去写。
12:02
不用怕啊,其实也并不来,没有你们想象那么复杂。就稍微代码多一点。啊,首先第一步呢,我们还是要去导入这个几块是吧,啊这个我就已经导了啊,导就导了吧,这个这个也不会有多大难度,来我们再来搞一个。我这一次呢,因为代码量比较大,所以呢我单独写成一个文件,我取个名字叫APP点解SAP什么意思。是不是应用啊,我当前这四相呢,是不是个应用,我这个应用的GS,那我诶放在。就放在这吧,那既然都这么写了,那我应该怎么办?啊,创建一个呗,对不对。是不样的,好了啊,这个地方呢,我这样,我我刚才不描述了我一些功能吗?我这里面我就把这些功能点都跟大家写出来,写在这里,我们照的功能一个一个做。
13:05
能看着吧,啊能看出来好了,我们现在要用最快的语法写啊,前面的原生的语法,那后面呢,可以去看一看。啊,写代码最好一上来啊,用这块首先写个这个东西是比较好的。啊,一个是我这个里面代码是不是在文档加载完了以后执行,再一个也能起到隐藏的作用。因为我上面写的所有代码不都在这个函数体里面吗?也就是说我在第一变量会污染全局空间吗?不会,这实际上起了两个作用,第一个让你的代码是在文档加载完了以后才执行,这是第一点,第二点能隐藏你的实现不污染全局空间,能不能懂,这是有意义的。好,那我们就一个一个来做,首先我们做的第一个功能是要去实现它。
14:05
这是最难的一步。点击向右或者向左的图标,平滑的翻到什么下一页或者什么上一页。先我们需要去把一些需要操作的一些元素。通过j query的选择器给它先找出来再说,我们来看一下需要操作哪些元素。首先啊,我们这一个div,它是到时候需要操作的,为什么说需要操作了,我这地方有一个隐,非常有隐蔽的效果,大家看它现在是不是在定时翻页呀,我的鼠标一放进去。你看还动不动?懂不懂,诶老师你为什么做这种功能呢。你在想嘛,我翻进去是为了干嘛去的,我是看,或者是我要去自己翻译。
15:06
对不对,你还在翻页,故意我就感觉我本来你们开始说这个需求很好,我要看,说我确实就是要看,那你不能再动了吧,我想动就动,我不想动他就什么不动。这是探索用户的心理。能不能懂啊,那这个时候我是不是要有一个,那我要移出来了。那是不是就继续动了,那这是不是有一个鼠标移入和移出,那我嫁给谁呢。我这个事件嫁给谁呀,就嫁给他呀,是不是我整个区域。能不能懂,这不就是我的这片区域吗?这片区域吗?不就是我这片区域吗?对不对啊好,那我需要把它。先给它定义出来啊,先定义很多啊,这前面定义啊,准备工作相当于是一些。
16:09
家里们可以吧,好,还有一些我们继续往下看。这个里面我需要去操作这个,它为什么操作它,我要操他什么还记得吧。我是不是要给它加一个什么style加一个,而且它的值是不断变化的,对不对。让他移动吗?那么你就让这个list是不是进行移动。所以呀,我需要去找到这个什么。记住啊,等号的左边和右边要有空格。好。但是这图片本身我是不需要操作的,能不能理解图片本身我是不需要操作的。好,下面。
17:05
啊,这个这个是什么,这些span大家知道是什么吗。就是那些圆点。看懂吧,这原点,这原点要不要操作。而且是不是统一都加上了点接率,你看嘛,我一点它是不是有变化,所以我要找到所有的什么。这个原点。来它是SPA标签啊,是这个div下面的是SPA标签,我怎么找了,来先定一个变量多了福,我叫point。咱们看看等于。先找到它的负元素,根据ID找,接着是它下面的什么。紫元素失败。懂不懂,好,除了这个啊,还有两个。这两个这什么呀。
18:01
是不是两个向左和向右的箭头。那我也需要超过他们了,所以我也把它们定义出来,做好准备工作,其实很有必要。是不是还有一个。好来把这个搞一下好了吧,那下面我们是不是要实现点击以后翻页的效果,那干嘛去先做什么,你说做什么,就是给他加点击监听,让他动呗,给他家点击监听呗。Next点肯方向是吧,这个要干嘛去要干嘛平滑翻到什么下一页。对不对,而另外一个是不是类似的。
19:02
那个什么,它是要什么平方,放到上一页,他们就是方向不一样啊。对不对?好,这个可不是一条两条鱼就能搞定的事。是很多条语句才能做,那我应该怎么办?这个实线是很多条语句才能搞定的事,而且我希望调用的是同一个方法最好了,对不对,是不是定义的方法是吧,以前呢,我们可能是先定义函数,是不是再去调用函数,但真正写项目的时候,真正写代码的时候,一般讲很多时候我先写调用,再写定义。先写调用,再定义,我现在干嘛去是不翻译,我取个名字可以说叫next page,但是有可能是next,也有可能是pre。
20:06
穿什么?能不能懂,那我下面干嘛,是不是定这个方函数。传一个next,这个是个不值,表示是否是下一页。如果是处。就代表什么四下一页如何破呢?上一页这个翻译过来叫平滑翻页。对不对,而且这一个next现在如果为代表什么,是不是下一页,而如果是first上一页。对不对。能不能理解,能理解好了,那下面我们就要去说了。
21:03
那我们翻页频繁翻页到底该怎么做呢?其实跟我们那个滚动有很多类似之处。有很多类似之处啊,OK,也就是说,也就是说大家看啊,他强调先我们也别平滑,你说我怎么样能够瞬间的翻到下一页,看看怎么做。啊,大家看啊。我们现在啊,手里面是不是我要去操作它,是我要操作它先我瞬间来一个啊,我要去操作他要操作它的什么东西。超出它的什么东西,是不是超出它的style样式是不是啊样式它的什么值,Na的值,它na的值为多少呢。那要在当前值的基础上加上或者减去600。
22:08
能不能懂啊,也就是说我当前是在某一个位置吧,我怎么样得到当前的life值。是吧,因为现在的这个life值相当于是复原数啊,所以我可以先得到当前的life值怎么着?传一个什么,不是我这里面不不是这么说的啊,我们这里面不有一个叫position吗?大家记不记得还记得吧,就这个。当前最新的live的值,我这里面不有一个position么?Position相当谁了?负元素的一个偏移量吗?而这个地方它最终是不是可以取life,也可以取什么top,我要取什么live,这是不是当前的?啊,就是我们在动词前我取名叫什么呢?Current。
23:03
可不可以,可以我有看到了,我还可以求出一个叫偏移量。什么意思呢?一个of side,也就是说我当前要便宜多少了便宜多少。可能是正600,也可能是什么负600,那到底正还是负呢?看什么看next的,如果next的处是正还是负非常关键了,是正还是负正,你这个那的是错的话,是说明我的下一页,下一页是不是向左移动,是不是向左移动,向左移动,你说的是正还是负啊负的负的对吧,那我这地方最好是定义成一个产量,因为是个固定的值。是吧,我叫一个K多少。是不是600能不能看懂,这相当于是不是一页的宽度,能懂吗?
24:05
能理解吧,啊,这是一页的宽度来,那也就是说如果它是这个,那下面呢。真的,那你说我该怎么做,我那就等于多少呢,很简单嘛。加上off不就拉倒了吗?对不对,对了吧,只是我也得放在逗号啊,逗号逗号逗号你要写冒号必须放在什么。放在一个对象里面是不是,嗯,可以吧,但是这个移动是什么。瞬间移动了。但是也要试试看看对不对,先做瞬间移动,看看看能不能动啊,是啥,关键时刻到了。刷牙是吧,走。报错来看一下。
25:02
他说什么,那诶我这个地方这个life的应该写成什么,是不是一个字符串名称呢?嗯,他去取这个变量,取道啊走,你来。可不可以,可以吧,往前左可不可以。是不,你们说老师你为什么不多点,不多点就出现白色了。可以吧,可以,我们慢慢研究,你别想着老师赶紧解决这个白色的。你先滑动,被我们划起来,你慢慢来嘛,一步步来。现在我们至少实现了瞬间的翻页吧,但不够。但是不够,对不对,我们最终的目标是干嘛实现一个平滑的翻页。平滑翻页是不是要把整个整个这一个off set分解成很那个小的it off set一个一个滑呀,是不是也就说还是跟我们那个昨天做的那个滚动。
26:14
是一个操作。也就是说,我们最终要去做这个东西,得先准备一些东西,准备哪些东西,首先我们要知道哪些东西。总的偏移量是吧,总的什么偏移量,也就是说我们到底要做多大偏移,总偏移量是多少,是不是取个名字,其实这个我们已经求出来了,O塞呀,还有一个叫什么总的时间,我们就叫它time吧,可以吧,这个是不是个指定的固定的值。我一指定以后是不是就不变了,那我就来一个time,假设我就等于多少呢?呃,300行吗?400吧,让他看的清楚点,那也就说这一个啊,是一个固定的值对不对,那我完全可以在这里面是不是给他什么,是不是定义在外面。
27:13
能懂吧,啊OK,这个是什么意思?翻页的什么,是不是持续时间。能懂吧,翻月的持续时间好了,除了这个还有什么?是不是间隔时间?那么你单元移动的什么间隔时间?那这一个我们用写一个什么名字呢?我叫一个名字叫。PA。等于是不是一个固定的值,我整一个是吧。呃,20行吗?这边可以吧,可以来,那这一个我们也把它给它搞过去。
28:10
对吧,啊,在这里面写一个注释,把这个注释呢拿过来。好,下面有这些东西,以后我要计算,我还需要知道什么。单元移动的是不是偏移量,你它距离对不对,能懂不?那我们也就是说计算出I什么。It of等于什么?是不是等于啊?看它除以什么括号啊,Time除以I下划线,看这是不是动态算出来的。
29:01
跟上面不太一样吧,这是计算出来的对不对。能懂能懂。这个总的配音量是不是也是计算出来了啊,也是计算出来,我可以这样啊。这个放到下面是吧,这样看起来好一点,上面这两个是不是固定的值,下面这两个是不是要算出来。按照吧,好。那把他们整好以后啊,后面就做什么。后面我们怎么样才能让它移动?怎么样,它不断动,是不是启动什么定时器循环定时器不断更新啊。的什么值?嗯。这意思吧啊,而且还有一个到达目的地的时候干嘛到达目标处。
30:08
他把了,是不是停止电视。其实跟我们昨天其实是一个老板没有区别啊,停止定时器。只是稍微的啊,有些东西不太小,不一样啊,思想是一样的。那好吧,那我们现在是不是又来居住了?好,来记住啊,我们来看一下这个是不是定义出来了,这个也定义出来了,Off set of set,哎这个地方来我先把set先定义一下这个啊,来这不是总的偏移量吗。是吧,那我就定义一个of是吧,Set啊开始了等于几,我就看它等于零几面,接着我后面是不是根据我的这一个X的进行计算。
31:00
这个叫什么?是不是计算OS的?能走吧,你先要有准备才计算嘛,计算off。好,这个还要吗?不要了,来啊,后面的不管啊。下面。下面呢,我们这个地方有一个啊,有一个有一个current啊,我们还要计算什么,完了以后还要计算椎。嗯,计算这个item of对不对。是不是就算他呗。对吧,好,那计算它怎么计算呢?我一个I,那我们把这个拿过来得了吧,好吧。这个刚刚写过了,就不用再写了。可以了吧,嗯,可以了。来下面啊,下面我们准备干嘛去说。先不用管这两个啊,先不用管它,先留着放着啊,先不用管它们,好,接着我们说启动什么循环定时器,不断更新它对不对,那我去干嘛去。
32:09
做呗,你就做啊,把这给我拿过来写。因为最终是不是最后要停止啊,所以要把这个ID给他什么留下来,Set interval function,接着了时间。什么?是吧,在这里面干嘛哟。是不是要去不断的去更新这个多福list left值,我是不是要做这句话。对不对,有没有问题。没问题吧,没问题,但是呢,这个地方啊,这里面大家看到啊,大家看一下我这个地方我是卡的,那提前是不是可以把什么。
33:05
把这个卡是不是求一下这个是什么意思。是不是得到当前的什么life的值?你只有得到当前以后是不是才能不断的更新。是还是不是啊是的吧,好,那下面啊,我在这个里面是不是就不断的去做更新的操作是吧。啊,但是这么整行吗?不行,你不是这么整的,你要这么整,那你就变一次,后面再也不会变了这个值。能不能理解,你应该这么写?怎么写的叫current等于谁也就说你你写个这个行吗?你说你这么写的行吗。
34:03
行不行不行不行,因为这个值在循环,在你这个定时器不断执行过程中,它会变吗?不会变,这个值会变吗?那不完蛋了吗?一动一下再动了。能不能理解你不要,你不应该是不断累加吗?能不能理解这个时候我应该传什么?我这个地方应该弹什么。是这个意思。翅膀。能不能理解,就是我是不是计算最新的。啊,这个叫什么,计算出最新的,看最后是吧,看给他什么。是不是设置进去。啊,设置left。好,关键现在我怎么知道他到达目标规则了?
35:07
是吧?我怎么知道他到达目标位置了?你告诉我。我怎么知道的?OK,这个地方应该还有一个。还有一个,我们叫目标left。叫计算出什么目标。处的left值,这个怎么求?其实很好求,说实话,我定一个名字叫什么呢?它给它left等于什么?你不看你不有一个吗。是不是能不能懂这面好多耐字啊,有一个看耐的是当前的那对不对,没动之前的吧,这个是我要动的一个目标位置吧。
36:10
对不对,而这一个是我每一次要移动多少吧,每一个小的单元移动移动多少,这个是我的什么,总的移动需要把他们的关系搞清楚,那下面呢,我怎么知道到达目标位置啊,非常简单嘛。看来不来等等于看,看来不来就说明什么。到达目标位置。对不对对的吧,那到达目标位置我应该干嘛呀。是不是清除定时器,是不是啊,怎么清除传什么。
37:04
是不是在的那一停的话,最后他还会不断的去调用这个回调函数吗?不会了,那是不是就执行次,这一次执行完了以后就没了,那这个时候我们清除以后,它就不会再去反复掉了吧,可不可以?可以的吧,啊,可以没问题好。那那现在我们就来看一下,看看它能不能翻啊,能不能翻啊,也不知道能不能翻。刷一下啊,走走可不可以。走开呀,这不挺好的吗?但是这边还不行是吧,我们还没想这个事了,是不是啊,那至少说我们的第一个已经做好了。这是我们的第一个需求,点击向右或者向左图标平滑的翻到什么下一页。
38:06
可以吧,可以啊。
我来说两句