00:00
在上次课程当中啊,咱们已经将咱们缩略图当中,诶,它的整体的一个思路咱们已经分析过了,嗯,那本次课程呢,咱们就来完成它左右点击两边之后的一个图片轮播效果。来吧,在这咱们找到咱们index点儿JS文件,由于啊它这也是一个单独的效果,所以咱们再写上一个函数啊,叫做点击诶缩略图左右。嗯,箭头吧,嗯,左右箭头的一个效果好,来上一个方式起一个名称,诶既然它是缩略图,那咱们就缩略图的左边。右边。的点击效果。哎呀妈呀,这个里边的这个这个函数名真长啊,嗯,好,那么现在啊,这个函数写完了之后,那咱们就得来写一写咱们对应的思路,对吧,其实刚才思路咱们已经分析过了,诶我只需要在这儿咱们用文字来给它展示一下就可以了,来第一步,首先怎么着,肯定要先获取左右两端的箭头。
01:19
按钮对吧,诶获取左右按箭头按钮,好,获取完左右箭头按钮之后,那咱们是不是得要获取一下咱们的,诶那个div元素在获取。可是的div以及ul元素,诶,因为你需要来计算它的诶长度,诶需要来计算它长度。好,那么咱们的箭头也有了,然后div也有了,LY也有了,是不是还得获取什么和所有的元素。是不是然后再发生点击事件。然后再诶,发生点击事件。
02:03
好,那咱们就先把该获取的呢,咱们就给它获取出来啊。首先咱们先找到两边的一个箭头,嗯,是在哪儿的呢?是在咱们。Left bottom left bottom啊,在这。写上,嗯,咱们叫prove吧,Prove等于document点上,在这个位置里边咱们要A,但是呢,这里边两个A,咱们并没有给它标注,对吧,所以怎么办啊,咱们可以来找到对应的页面。来往下推。下推往下推,在这咱们给它手动加一个class,就叫做prove,诶给右面的这个呢,咱们叫做next,这不就得了吗?对吧,你写可class的目的其实不光是为了写样式,还可以什么通过JS来进行简单的获取元素啊来在这加上点。
03:04
再来一行,写上N,把这改成N好了,那么现在这两个箭头函数获取第一步获取。箭头函数。哎,箭头元素啊,箭头元素。来,那咱们cancel.log把现在的这个prove还有N给它拿到,看看咱们是不是真的拿到这个元素了啊。好,那么现在这两个箭头元素咱们是不是都已经拿到了,对吧,左边一个箭头,还有右边一个箭头,好,紧接着我还得需要拿里边的div。第二步获取啊,可视的什么div啊,U啊,还有LY对吧,诶一同获取啊,来再加一个div,那个div叫啥来着呀,咱们就用人家这个名吧,叫pic list是吧?哎,我也叫pic list。
04:02
点corre LA,那么在这个位置呢,咱们把右侧的这个值给它原封不动抠下来,好,紧接着YUL,嗯,这个ul呢,是在它里边的,对吧,嗯。Document点上CH。来写进去,Ul有了之后还得有什么,所有的我就叫Li nose了啊,Document点上cor selector o,嗯,Selector o是不是在这些ul里边的LY?对吧?这三个元素写好了之后怎么着一块来进行测试,看看你是不是都拿到了pic list还有ul。以及Li notes。来看一下div有了,Ul有了,还有14张的图是不是也都拿到了,对吧?嗯,拿完了之后,好在发生点击事件之前,咱们说过是不是得要做一下它的一些初始值的计算。
05:12
对吧,诶,所以在这儿我要先标上第四步,嗯,第三好。计算计算什么呢?你得知道啊,你点完了之后,它为什么这个图片它能动,一次性动几张你是不得知道。对不对?来咱们观察一下,现在这里边一共是五张图对不对?观察走一次性走了几张,两张你说只是两个吗?诶,别忘了细节两个Li,它里边还有对应的后面20像素的间距,这个地方不要忘了,诶这个地方不要忘了啊好,那咱们说过一般啊,你想要去做这种轮播图,你必须要知道第一它的发生起点。
06:02
你从哪开始运动?再有你每一次走过的一个不长。你每一次所迈的一个步子,当然咱们看到了不长,是不是两个的宽度,再加上对应的后面20像素那个外间距,对吧,还有什么,你现在点击了这个左右两边箭头之后,你这个ul总共可以走多长?A总共ul可以走多长?总体运动的一个距离值。这些都是你需要在发生点击事件之前把它一个个都算出来的,诶把它一个个算出来的啊来,咱们在这儿加上一个三叫做计算,首先啊,我先知道它的发生起点,咱们之前已经说过了,你现在这个位置,假设它是ul,好,我点完右侧的这个箭头,那它起码是不是要往前挪个两张图,以及间距的一个位置,起码它是不是得到这。
07:10
是不是,诶他起码得往前推呀,对不对,诶得往前推啊好,那么你现在往前推之后,我的起始位置其实就是和你原先的那个div是不是都是在零点的那个位置啊。只不过我每一次所走过的这个距离,是不是就是那个两张图片?对吧,诶两个。LY,它的一个宽度再加上什么,再加上20。怎么着乘以二。是不是咱们之前分析过的,对吧,好来切回来。加上一个y start等于A0,嗯,起始位置有了不长,这个不长呢,我就用step来进行表示啊,STEP0表示由于啊,每一个LY的元素,它的总宽度是不是都一样的,我取其中一个就可以了,Nose当中的零点,什么over set加二十一共是几张,两张这样的一个距离包起来乘以二。
08:18
诶,包起来乘以二,好总体运动的距离值,诶在这咱们去加点注释吧。这是发生的起点,这个呢是它发生的一个不长,这我需要去计算ul当中总体的一个距离值。叫做end。Position。An position,好,那么总体的距离值,那你就想啊。你现在的这个ul,如果它没有运动的时候,假设它是这么长,然后你的div,它默认情况下你能看到的诶。你能看到的是不是这么长。
09:01
对吧,那你说我能走过的间距不也就是什么,用你现在的这个宽度来减去。这段的一个宽度。是不是用ul的宽度来减去,可是div元素的宽度对不对,嗯,来写上啊,那咱们这个里边等于。Ul的宽度减去div块的一个宽度。当然,Ul的宽度怎么怎么算。啊,Ul的宽度咱们怎么算。你说ul宽度咱们实际去看一下,然后写进去不行吗?可以,当然万一他要是不是14张图呢。对吧,诶外套是十张图,九张图是不是都有可能,所以这个里边的宽度,它是不是一个可以变化的一个数据。对吧,那咱们得自己去求啊。
10:00
其实啊,在这,其实你没有必要想的这么复杂,换个思路。来,我再给你提供换一个思路啊,假设你现在这个位置是不是咱们div的宽度,比如说它是400。假设啊,假设好,那么你现在的ul,假设它的总宽度在这。加它纵宽度多少呢?假设为1000。A,假设为1000,好,那我是不是隐藏了起码得有600这样的一个宽度,那我问你了,那我能走过的总宽度,其实是不是也就是隐藏的这一段的一个距离?对吧,因为前面不都站着了吗?我能走的距离是不是就是从这到这的一个总宽度啊,好,那我问你了,那这块的总宽度好不好求啊。它是不是也是由一个Li的一个宽度。一个LY的宽度,再加上一个什么20像素的一个间距。
11:01
一个一个这样拼凑而成的。对吗?哎,一个一个拼凑这样而成的啊,好,那你说吧。我用我总的14张减去前面的五张,剩下的这些是不是它隐藏的一个总数。然后有多少个这样的一个宽度呢?我再去乘以一张图片的一个宽度,是不是就得到了现在绿色线所画出来的一个距离?来,再说一遍啊。你总的一共是14张。对吗?我前边显示的有几个,有五个。后面是不是就差九个,我在这标上啊,差九个好,那么现在九个里边到底有多长,它是不是分别都是由一个诶,由一个LY的宽度,再加上它的一个20像素的间距这样组成的。
12:02
是不是由这样组成的?对吧,诶好,如果是这样的话,那咱们切回来吧。写上,嗯,在这接着写个注释吧,等于咱们用图片的总数,其实就是那个14减去咱们div当中显示的一个数量,是不是就是14减五,剩余的一共有几个九个,九个当中的元素到底有多长呢?咱们是不是就是诶挑出来一个Li,它的一个宽度还得加20像素的一个间距,是不是就得出来它隐藏里边的一个长度。AUI当中隐藏的那段宽度就是它可以运动的总距离值啊,总距离值来吧,那么nose当中的一个长度减五。哎,直接减五就可以了啊,来给它包起来,包起来之后我让它再去乘以什么。
13:05
来一个lino的零点,Off set加20像素。啊,加20像素这个位置里边,你取哪一个都可以,默认咱们就取第两个就可以了啊,那现在咱们这些计算的起点也有了,不长也有了,总的距离值也有了,那最后一个步骤是不是才是发生事件了呀,左边的点击,右边的点击。是不是一个个发生事件对吧,好,那咱们现在给事件吧。点上on click等于function next.on click等于function,好,那现在这些元素一个个都用上了。哎,一个个都用上了啊好。那么在咱们这里边,你习惯点击是先点右还是先点左,肯定是不是先点右对吗?嗯,先点右啊来咱们就先实现右边的这个时间。
14:01
当你点击右侧的时候,咱们点好。把这个刷新一下啊,当你点点完了之后,你会发现整体ul元素默认是不是在这儿呢,对吗?它得往左推,所以它的距离走完了一个值是不是一个负值。对吧,好,那走负值的时候,咱们说过,你现在起点也有了,你每次所走的步长也有了,那我是不是得让它去加,等于一个步长。A,起点去加上一个步差,加完了之后,我得问你现在每次走完的这个距离是不能超过我总的一个距离值,对吧?不能超过它啊好,我说了,如果你万一你走着走着你要超过了它了。我是不是得让你,诶就等于它。嗯,就等于它,然后如果要是尾没有超过,那咱们就正常的给它来进行添加距离值吧,等于负的S代加上像素单位。
15:11
好,来,咱们去试一下啊。来找到咱们对应的一个页面,点击右键,嗯,来点发现它不动,诶如果你看到一个效果不动的话,你先别着急,先看一下底下的一个控制台有没有报错,没有,那证明咱们的代码写的是没有问题的,对吧?好,那它不动有可能是什么?有可能是你的ul,唯有去加咱们的绝对定位,诶来吧,咱们找到let。嗯,Less,那么在less文件当中呢,咱们找到对应的这个位置,诶就在这儿啊,在这儿给这个ul啊,去加一个position的absolute,默认left为零,当然它是绝对,它得有参考的,相对谁呢?直接的负元素。
16:01
嗯,直接的负元素好。那么现在加完了之后来点击点击它是切换了,但是少了一点点什么滑动的一个效果。咱们是不是还得给它加点动画,诶给ul加train station0.5秒,嗯,加0.5秒啊。来刷新,这样的话,咱们是每次走两张两张两张两张走到这就可以了。嗯,走到这就可以了啊好,这是咱们对应的在右侧,当然右侧实现了,那左侧道理是不是就是相通的呀,我把这块咱们给它复制粘贴,这就是往回走,这就不能小于零,嗯,如果你小于零,我默认就等于零。就等于零,好。走走走走。走走走走是不是到头了,左右两边的这个箭头的效果,咱们是不是就实现好了呀?嗯,好了,这样的话呢,咱们就把这个每一次图片它移动的一个距离,以及ul当中移动的距离,咱们就OK了,嗯,咱们就OK了啊。
17:15
在这里呢,咱们的这个pic list没有用上,所以呢,咱们可以暂时给它消掉,诶没有用上的话,咱们就可以不要它了啊。
我来说两句