00:00
好,那么上次课程当中啊,咱们已经完成了缩略图,点击上面换小图和对应大图路径的那么一个功能,那么本次课程呢,咱们将啊继续来分析一下,底下咱们还差什么,还差左右箭头能够实现图片轮播的一个效果。想要在这块能够写出来它的代码,不着急不着急啊,咱们本次课程呢,咱们就是把它的思路给它捋顺了啊,思路给他捋顺了,好,那大家来想一下啊。我呢,用红色的笔来给你画出来,这是不是咱们div当中的可视区域?诶,它的可视区域假设呀,它的可视区域宽为400,假设啊,同志们假设,因为我好算。好,那么里边的Li是不是有14个,那总的U的长度最起码是不是得在这个位置。
01:01
对吧?最起码是得在这个位置对吗?那假设咱们现在ul的总宽度为1000,好,假设它为1000,那我问你了,如果我想要去实现咱们右侧的这个箭头按钮的功能,那我问你了,那你是不是得准备三样东西?第一,你得先问自己。谁发生运动?诶,咱们之前已经做过类似于这样的一个轮播图的一个效果,谁发生运动ul。对吗?此时你ul和你现在这个div,它俩之间一定会形成什么定位的关系。默认它的起点是不是为零像素?对吧?诶,它默认运动的起点为零像素,好,那你现在还得知道它每一次所走过的多大不长的距离。啊,所走过多大不长的距离,走过多大呢?这个位置啊,我用粉色线来给你标注啊,两个它的一个总宽度,外加它后面的一个20像素。
02:12
诶,他每一次走过的,这是咱们的步长。嗯,这是咱们的步长。那假设这个不长为200,那么你就得算吧。我从零开始走,每次走200,每次走200我得有走多少次?或者说我得有走多少的一个距离,我才能走到头。是不是这个道理对吧,因为我的起点已经有了。然后我的不长我也知道了,那剩下的我就应该要知道什么,我应该ul能运动多长的距离。对吧,诶我得知它能够运动多长的距离,那它能够运动的一个总距离,那你得想吧,是不是你现在从这个位置一直到这儿。
03:11
是不是这些是你ul当中可以移动的总距离?来,我在这给你标上啊ul当中的总距离。当然这个距离啊,是它一边移动的总距离啊,同志们,是它里边移动的总距离。好。那你说吧,它的总距离咱们应该怎么求?你说老师这很好求啊,你不是1000减400不就得了吗?但是你别忘了,你中间是不是还有一些它的像箭头啊,他们之间的一些宽度差呀。是不是,哎,它就容易不准,怎么办,换个思维啊,换一个思维,换一个什么思维呢?那你想一想啊。
04:00
你现在这个u Li里边啊,它是不是就是通过一个Li来,我都快没有颜色了,诶我拿一个绿色表示吧。那么咱们这里边我是不是就通过的一个,再加上它后面的20像素的间距,一块一块这样给组成的。对吗?好,那我就知道了,你现在可以可视的是不是就是五张图片,一共是多少张,一共是14张。一共是14张,而我现在可视的它的宽度是不是五张,那我问你了,那隐藏的这个区域为几张计算是为九张啊?对吗?诶为九张好,那九张里边是不是也是通过一个Li的宽度外加20像素的间距这么一点一点给堆起来的。
05:02
所以那我问你了,Ul,它可以运动的总距离应该怎么求?14减五是不是剩的九,那九张里边是不是应该为一个的宽度,再加上20像素的间距。是不是这段距离咱们就求出来了?对吗?好,那这段距离有了之后。那我的起点有了。那我里边不长也有了,Ul当中可以运动的总距离也有了,那我问你,那你两边的这个箭头可不可以发生运动了。可以了,因为咱们说过,你运动当中的公式是不是就应该等于你的起点?与你的不长之间做运算。对吧?A起点和你的步长之间做运算,运算完了之后是不是就等于你的每一次的那个目标值。
06:03
对吧,诶,比如说零零加200好,那我第一次走过去了200,那200再加200,好,我又走过去了400。对吧,诶,我走过,假如说我走过里边还剩600对吗?那咱们还有再再走一次。对吧,诶再走一次就到头了吧,那就到头了啊。那我问你了,那如果我现在到头了,后面还能走吗?如果要单纯按数它里边的相加的话,肯定没毛病,他能接着往后走。但是你能让他走出去吗?数的话没毛病,但是ul是不是就卡到这就停了呀,所以你是不是得要加判断诶,如果你要强制就到了这个位置了,假设它的宽度在这。诶,假设它的宽度位置已经顶到这儿了啊,已经顶到这了,它还能往下走吗?不能往下走了,所以我是不是就应该等于它最终的这个总距离啊。
07:01
对吧,每次它运动这个距离啊,好,那这是咱们向右的一个箭头,当然如果要是向左的这个箭头,那我问你了,起点是不是为零啊,那我往左如果直接去点它的话,它是不是要小于零,小于零能行吗?不行,如果小于零怎么办?我就让它等于零。不就得了吗?是不是,诶,所以这个地方就是咱们所说到的,它的思路的分析。其实容易有点偏差的,以为就是什么你现在ul可以移动的距离也就是你的1000减去400,但你别忘了,中间还会有一点点误差呢。啊,还有一点点误差呢,啊,所以咱们这种方式的一个计算,它就会把误差给它消除掉。好,那么既然咱们的思路OK了之后,那咱们下一个步骤怎么办?开始写代码吧。
08:02
啊,开始写代码吧。来,那么这个视频呢,咱们就将思路给大家顺到这里。
我来说两句