136.尚硅谷_JS基础_完成轮播图

那咱们接着来做，昨天咱们做这个轮播图啊，咱们这里边呢，我先把它复制一下啊，新建一个这个we部项目，对118，咱们这轮播图这个呢，CTRLC把包括GS文件，还有我们这个网页一块都粘过来，粘过来以后呢，这个删了不要了。我这块改一个名叫一个零一啊，我们今天这个轮播图，那这块还是给它打开，我们这里面呢，先运行一下，那虽然这个图呢，整个这个大体的框架也搭出来了，而且也完成了这什么呀，点击按钮去切换图片的一个这个功能啊，这个功能，那实际上这个功能整体来说有了我们这个目函数以后，做起来就非常的什么了容易了，只要你把这个逻辑给它捋清楚，它是怎么去切换图片就OK了，那我们再回顾一下我们是怎么切换图片的。诶，我这图片是不是整个在一个这个大的U里边啊，哎，我通过修改这个ul的这个left值是不是来显示修改显示图片啊，想显示哪张你就设置一个相应的这个left的值就OK了，显示第一张left来一个零，显示第二张来一个哎负的520像素，然后第第三张是不是就是负的1040啊哎，以此类推啊，以此类推是这么一个效果，那我们说了，现在这个功能模已经完成了，我们还需要一个什么呀？哎，叫做一个自动切换啊，自动切换什么叫自动切换呀？诶就说你不用点这图片自己去干嘛呀，自己去转吧，诶自己转那可能干嘛呀，我每隔三秒换一张啊，每隔五秒换一张啊，每隔两秒换一张，我隔一段时间是不是就换一张啊？哎，换一张，所以接下来我们要做这么一功能，嗯，来，我们在这来写一下。

嗯，咱们就在这儿吧，这是我们单机小函数，我们在单机小函数下面写一个要干嘛呢？我们来写一个叫什么呢？叫做自动去切换我们这个图片啊，自动切换我们这个图片，那现在我要自动切换图片呢，我们想想这自动切换图片我希望控制的更灵活一点，所以这里边啊，我这样我干嘛呢？我这里边创建一个这个函数用来干嘛的呢？呃，用来开启我们这个自动什么呀？诶切换图片我不要创建一个函数呢，因为有的时候我这个图片我需要切换，但是有些时候我需要什么呀。

你是不停一会儿啊，哎，不要切换，我所以创建这么一函数呢，让我们来控制一下它，那这个函数你怎么写，直接来个function叫做一个这个叫做一个凹凸，凹凸Sha de，凹凸change叫自动切换，哎这么一个方法，哎调用这么一个函数，然后呢，在这我要想去开启自动切换，我是不是在这去调用一下啊，哎，凹凸这个甚至诶调用一下这是什么呢？这是我们这个开启自动切换，那接下来的工作呢，实际上我们就是需要干嘛了，是不是就需要来写这个函数来，哎那问题就来了，那我们这块要怎么去开启我这个自动切换，或者说自动切换的时候，我要干什么。现在我们图片什么时候切换呢？说点的时候再切换的吧，诶我点的时候才切换的，而我们这个自动切换的就是什么呀，你不点是不是也可以切换呀？诶那你切换图片现在是调到谁呀？是不是调到这个木啊，哎木距切换图片，那我一想什么呀，那我其实我要定时去切换，我是不是就每隔一段时间去调一次这玩意儿，诶每隔一段时间去调一次啊，所以那要每隔一段时间调一次，我这块需要什么呀？哎，我需要开启一个这个什么呀？诶定时器用于什么呢？诶用来我们这个定时去诶切换图片啊，定时去切换图片，直接来一个定时器，我们来一个set，一个in，我们来一什么呢？Function function这来一个时间就是时间呢，我就来一个这个3000表示什么呀，我说是每三秒切换一次啊，这个时间呢，不宜过短，首先过短了以后容易干嘛呀，是太快了呀，哎，太快了啊，所以这块注意不宜过短啊，3000毫秒三秒钟，然后呢。

在这个函数里，我们是不是要切换图片了？诶那我怎么切换呀？假设现在我是第一第索引为零，那个图片我应该干嘛呀？是不是切换到索引为一的呀，索引唯一的切换到索引V2的，我是不是切换到下一张啊，所以我要干嘛呀？我是不是要给这个索引进行自增了？哎，为这个索引进行自增使我们这个什么呢？诶索引自增索引是多少？索引是index吧？哎，我们用了一个变量叫做一个index，所以你要索引自增的直接来一个这个index加加是不是OK了呀？诶索引自增，那索引自增完了以后，我是不是可以去执行这个图片进化来，诶所以接下来呢，我们来执行我们这个动画来干嘛呢？来切换我们这个图片，直接调用一个这个目函数，我们要切换的元素是我们这个img list，诶，我们要执行的这个样式是来看这段啊，咱们它特有的这个描述啊，样式是我们这个left，哎，我们这个target是什么呀。

哎，负的520乘以index，其实跟上边那个是不是一样的呀？哎，然后再来什么呢？我们的这个速度，速度来一个20啊，然后再来一个这个扣back，我们来一个方式方我们先写着啊，我们先写着我这块运行一下，咱们看看效果一刷新。

诶是不是就自动就开始切换了呀，诶开始切换了，那我们现在这个效果干嘛呀，我每三秒钟执行一次自动切换，也就说我这图片是每三秒钟会换一次啊换一次但是看哪有问题，这点的是没动啊，诶点都没动，所以这块呢，我们再回调函数里来做吧，我们说动画切换完了，我们来干嘛呢？我们来修改我们这个，诶导航点直接来什么呀？我们有一个方法叫什么呀？是不是set a呀，诶set a，我们这个导航按钮直接来一个这个site，诶A这块我们叫导航按钮吧，导航按钮导航后我这一保存，其他都不用传了，它是不是自己就设置来，诶那再来看这一切换。

诶是不这就自动自动跟着换了，诶一看这功能是不是不是搜easy了呀，诶这就完事了吧，诶大家注意有没有什么问题呢？来往后走走你哎呦没了是吧，怎么出来一大蓝色的，大绿色的是吧？诶这什么玩意儿什么情况还是这个问题，我这索引是不是一直在自增了啊，我一共就几个图片啊，一共就五个图片，你说你最大索引是四，你能不能大，你们能不能大于等于五了，不能，你是不是超过我最大索引了，所以这块我们说index能不能一直加价，不能，所以这块我们要判断什么呀，我们这个index的这个值吧，Index值应该最大多少，直接来一个index模等于谁呀，哎模模等于五就不好了，模是不是写死了呀，实际上就是我们这个img例子的点一个Les，我们是不是这个MMG的一个，诶是叫MMG瑞是吧。

MG啊MG点一个length，就是我们这个图片的一个这个长度吧，诶图片边一个长度，这回咱们再看一刷新，诶可能这回呢，当它为最后一个索引，就是他当它为五的时候，是不是就自动就变成变成零了，变成零类现在跑到最后一张了，那这个效果呢。诶就更happy了是吧？诶诶是不是一直回到头去了，但是发现什么呢？回到头以后那三秒时间又到了，他是不是切换到第二张了，这个效果还是还是很恶心的是吧？诶你看这样很有意思的这一个东西是吧，那这个东西它就不好了，是不是体验不好啊，那这个事我们要怎么解决，现在啊，我们来说一下，把这东西画个图，咱们来说一下是怎么回事，所以以后啊，你们去做什么东西的时候，做什么效果的时候，自己拿个纸笔啊，或者拿这个软件画个图，把这东西给它，呃，理一下，理一下就明白了啊就现在画一个图，这个图呢表示的是我们这个div，然后里边画一个长的，这表示的是我们这个ULUL呢给它来一个别的颜色，来一个这个蓝色，现在这个事儿有点有点扯，怎么扯呢？我们现在自动切换，也就是说每隔三秒钟我这个图片是不是切换一次呀？诶，这切换一次是不是切换到下一啊，再切换，切换到下一张再切换，切换到下一张再切换，是不是又往下一张切换呀。

直到迁到哪了，迁到我们这个最后一张了，最后一张它后边还有没有了，诶没有了，他是不是把这个索引给它变成零了，变成零干嘛的，他这是不是从最后一直返回到第一张啊，诶他得这样咔咔咔咔咔咔咔是不是就很恶心了，诶跟跑一火车似的是吧？而且有的时候什么呢？有的时候他以为跑到头呢，第二次动画开始了，可能跑到一半咔是不就回来了，诶这东西效果很不好，那我们希望什么效果？

我希望什效果他这转转最后一对吧，他嘛呢还接着往下转，再往下转显示谁啊，显示的是第一张啊，显示第一张，然后第一张往下是不是他接着选选第二张啊，换句话说，我希望的是我们这个ul它一直是往往左走的，别往回走吧，哎一直都是往左走的，那现在我们这块出现的情况是不是是往回走了呀？哎，当你最后一张它会往出现这种往回走的情况，那这块我们要怎么办呢？怎么办呢？那就是咱们一步步步来，那现在我们希望的是最后一张完了以后，它继续往左转，是不是还显示第一张啊，哎，那我一想，那这样我做这么一方案，我在最后一张是不是就5.gbd啊，在它后边呢，我再放一个图片，诶但是这个图片叫什么呢？叫1.9比例，也就是说我在最后又放了一个图片，最后这张图片和第一张图片是一样的啊是一样，我这个保存咱们来看一刷新这块呢，咱们先给它点一下吧。

诶，这是最后一张，再往后转，他不又转到第一张了呀，哎，又转到第一张了，那这样是不是，诶咱们先不管这个是吧，但是你会感觉当他转到最后一张的时候，是不是就感觉又像左转又转回到第一张了，哎，就比刚才那种感觉稍微的好一点，但是这东西有点骗自己了是吧，你知道第一张以后，他是不是又往回转去找那个。第二张了，哎，这东西它完全不着急啊，完全不着急，咱们先看一个问题，看一个什么问题呢，看这当我转到最后一张的时候，实际上他再往这边转，是不是转到第一张啊完了，这玩意儿太缺德了是吧，来咱们往后点点个。加速一下，诶，这是我们第四张，再往后转转到第五张，再往后转是不是转到第一张啊，哎，那注意了，此时这个实际上是我们什么呀，第六张图片对吧？但是由于第六张图片和第一张图片是不是一样的呀？哎，所以看着是不是就像第一张啊，那问你了，此时是第六张，那实际上我们是把它当成谁呀，第一章呢？但是这块你注意导航点是不是一个都没变呀，为啥一个都没变呀，我们是不是没第六章索引为五，我们是不是没有索引为五那个超链接啊，所以它就一个没变，那当他第六章的时候应该谁变？

是不是应该第一个变呀，哎，应该第一个变，所以这样我在这儿干嘛呢？咱们加一个判断啊，先解决这个点的问题，在哪呢？我在这判断，判断什么呢？判断我们这个当前索引是否是最后一张图片，怎么判断呢？直接来一个if index，如果干嘛呢？如果大于等于我们这个IG瑞点一个lengths减一，如果你比它，如果你跟它相等了，其实大于咱们是保险一点，其实写一个什么呀，也等于就够了，如果你等于mt.Les减一，那这是什么呀？是不是就是我最后一张图上索引啊，如果你等于它了，则什么呢？则将我们这个index设置为零，诶，因为你这是最后一张和我第一张是一样的吧，我就把你这个index设置为零，直接来一个index等于零，这样是不是就OK了呀，那这样当你显示最后一张的时候，我这个索引是不是也是让这个第一张。

一个这个导航按钮变成这个黑色呀，来咱们来看效果啊，这样一刷新还是啊，咱们让它转一会儿啊，让它转一会儿。诶，这是我们的这个第三章，然后第四章注意啊，我们看的是点啊第五章，然后还是下面转到第六章了，我们要看的点。点是不是还是第一张啊，诶点就变成第一张了，那这样是不是转回来了，哎，但是同学说了，这这是不是还是往回跑呢呀，没有解决根本问题对吧，但是咱们要一步一步来，那注意了，现在是什么情况，现在是这么一个情况来看这。

这个是我们整个一个图形，我们是不是还是从我是还是往左去转呀，诶转一张，右转一张，右转一张，右转一张，直到转到哪了，转到我的这个最后一张，我最后一张是不是和我第一张是一样的呀，是一模一样的啦，但是注意了，但是问题来了，当我那最后一张的时候，它是不是还是要往右转一直转转回去，诶那我想了，那我最后一张和第一张是一样的，那我能不能干嘛呢？我给他换一个手脚，我把最后一张一瞬间给它换成。第一章呢，行不行呢？诶来我们看看，我们来看看，那我们说此时什么呢？当一旦进入这个判断，此时显示的是我们这个最后一张图片吧，而什么呢？而我们最后一张图片它什么呢？和我们第一张是一模一样的啊，一模一样的，所以在这干嘛呢？诶我们干嘛呀，我们通过这个CSS，我们通过这个CSS，诶将我们这个最后一张一下子干嘛呢？诶切换成什么呢？叫做第一章这玩意怎么切换呀？哎，咱们来看啊，我做这么一个事，直接来一个mg list，点一个style，点个style，点一个什么呢？点一个left等于什么呢？等于零完了。

我在这时候把它那个左侧那个偏音量是不是变成零了呀，那注意了，左侧偏音量变成零，那是不是就是。回到了这个状态了，那此时显示第一张是不是第一张啊，哎，我们来看看这回是什么效果啊，我这一刷新，咱们还让他走看看这还会不会去回啊，会回。

来，马上转了，到最后一张了，这是我们说又回到第一张了吧，然后注意看看。完了，说半天这热闹他又回来了是吧？Img list我们来刷新一下，看看哪写错了。F12，打开一下控制台，我这还要这个，期待这个。奇迹出现的是吧，结果他这他这没给面，咱们等一下他再来看看看有没有报错啊。现在呢，该转到我们这个最后一张了，然后呢。完了我看看啊，哪写错了，Index等于零，我把它设置为零了，然后这是我们这个img list style点一个left的等于一个这个零，这一块应该是没错的，那这块啊，我先跟你们说一下我这个思路啊，先说一下整体思路，什么思路啊，就是现在这个图片是不是一直去向向左转的呀，直到转到最后一张的时候，实际上最后一张和我们第一张是是一样的吧，那我希望达到这么一个效果，它一瞬间是换过来呀，诶一瞬间换过来，但是由于这一块我们没有加动画，实际上我们眼睛应该是干嘛的呀，看不出来的啊，看不出来的，但是实际上效果现在没有达到我们这个预期效果，现在我要看的是哪的问题，应该是它接着是还是往左转是吧，但是现在它还是干嘛了，往回转了，我要看一下他这个，所以值有没有变，直接来看我们这块现在是负的1560，再往后转的是2080，再往后转呢，是一个这个2600这一块它就应该。

一瞬间应该变成什么了，变成零了，结果它没变过来啊，我们来看看哪的问题，首先我们来看这这我调了一个这个set a在这个回调函数里边确实掉了，掉了一个set a以后呢，然后呢，这做了一个判断，Index如果是大于等于img这个A瑞点Les减一，如果大于它减一，那我们说ammg角锐点Les现在的值应该是五对吧？哎，五，那五减一是不是，这该是大于等于大于等于四，而且我们看到那个六，诶六减一是吧，是应该是五是吧？哎，六减一那这块，而且我们看到这个点是不是已经变了呀，点已经变了，证明进入我这个判断了，那那是不是这行代码没执行呢？是我没保存吗？我看看。

稍微等一下，要是没保存就就太恶心了。哇，真没保存呀，天呐，哎呀咱们再看啊，咱们咱们咱们就是刚才那段就当没看见了是吧，刚才我竟然没保存是吧？嗯，这么愚蠢的错误竟然就犯了，所以你们以后注意啊，写完代码一定要习惯性的CTRLCTRLS是吧？CTRLS我这还期待的是吧，结果自己给自己挖了坑往外跳呢，好，那咱们还是啊好，咱们刚才还是从头来看啊，现在我这个动画去执行它是不是在一直往左切换呀，还是来看啊，它效果已经没了是吧？诶直接往后看到了我们这个最后一张，然后再往左边，是不是我们第一张啊，诶，那第一张的时候看你看。

它是不是又继续往左转呀，诶这时候还有没有往回转了，就没有了，是不是一直都往左转了呀，那这种体验是不是比我们刚才那种体验要好一些了，还是它是怎么实现的呀，来我们再看啊，还是这个图啊，我们再去演示一遍怎么实现的，它还是向左转，向左转，向左转，一直向左转，但是直到到了后一张的时候，我们说最后一张我们设的和第一张是一样的吧，此时他一瞬间。就换过来了，这个时候只不过干嘛呀，我们没看见，我们看不出来，因为是什么呀，没有执行这个过渡效果，一瞬间就换过来了，那既然一瞬间换过来，它再转是不是还是继续向左转呀，哎，继续向左转啊，那这样怎么看呢？我们怎么来看出一个效果啊，可以先这样看，我把第一张图片啊，我换一个换一个第三张，现在他们两个是不是不一样了，一不一样我们就能看出那个切换的效果了啊，切换效果还是来看啊，别着急。

哎，咱们来看这，嗯，是咱们一步一步来。来看，这现在是我们这个最后一张，再往后看，诶你看看见了吧，是不是看到它中间有一个这个切换的过程啊，那但是由于刚才我们这个图片什么呀，是一样的，所以看不出来，那这次这个图片是不是不一样了，我们就明显看出它有一个什么呀，诶咱们看啊到这看是不是一下子换过来了，哎，就少了么一个切换的过程啊，但是由于我们这个图片是这个一样的，所以这里边呢，我们就看不出来了啊，看不出来了，你也可以干嘛呢？诶你可以把这个什么呀，我们这个我们是不是把这个多余部分给它裁剪掉了，我把这over尔的黑线给它取消掉，我们来看。

诶，这一块还是我们到了这个最后一张，最后一张后边是不是藏着一个第一张啊，然后注意啊，看这这过来。看到了吗？一瞬间是不是就换过来了，诶一瞬间是换过来，只不过由于什么呀，由于我们这两张图片一样的，我们是看不出来的，所以这块实际上相当于什么呀，咱们玩了一个这个呃，一个小障眼法是吧，什么欺诈骗钱似的是吧，就是一个障眼法，相当于变了一个什么呀，变了魔术一样啊，变了一魔术一样啊好，那这一块呢，这个功能我们就算给它完成了啊，完成了就是这块把这个逻辑给它理一下行了啊，其他就没什么难度了啊，然后再看一个问题呢，我们来看啊，这都做完了是吧？来咱们点一个呗，我再点一个走你。还行是吧，走你。诶。

点。完了这些有时候还演示不出来是吧？哎，你得你得赶上那个寸劲，他一动完了三二一点。看这个效果了吗？你感觉我现在是是不是有两个电话的两个动画我在同时执行啊，哎，你再看啊，这一点看这个效果了吧，诶它有两个动画同时在执行，当我这一点它的时候，你注意啊，我这一点诶看见这效果了吗？他是没过去啊，诶我再一点啊。对，不然这时间差得把握好了点，看见了吗？他是自动回来了，为什么自己就回来了，刚才。哎，我现在点的是执行的，我点的那个单击响应函数在切换切换动画吧，但是与此同时，那你注意了，当我点的这一瞬间，我点了以后，你看是不是我那个自动切换它也在执行了，那我点的一瞬间自动切换一执行，他是把我点那个动画就给我取消了呀，那我们想啊，那用户觉得很奇怪，我这点点半天干嘛呀，点不过来，他一下子给我过个码了，又给我换回去了，这是不是就变得很奇怪了，但是现在我得我得找一套寸劲是吧，倒计时三二一点。

三二一点看了吗？三二一点。三二一点完了，那咱们这样啊，我点远一点。这样我从这点到最后一层。完了，咱们这个动画呀，执行的时间太长了，看不出个效果啊，我把这个时间呢，稍微给它调它短一点，来什么呢？来一个1000啊1000，所以刷新再来看，现在我直接点到最后一张，你发什么呀，过没过去没过去吧，诶还是我这点回第一张一点。是不是也没过去啊，为什么没过去啊，就是因为我同时有两个动画在执行，当我在执行我点的这个动画的时候，我那个凹凸唱是不是也凹凸change是不是也在执行啊，他一执行把我点的那个动画是不是就给我停了，哎，那我们说应该是哪个优先呀？哎是我自动播放优先还是我点优先呀，是不是点优先，因为点它才是用户的操作吧，那我块怎么办？那我就需要在我点的时候，我是不是就先停止自动播放呀，那怎么办呀？哎，我是不是要把这个定时器给它关了呀？哎，给它关了啊，所以这块注意，在我们点的时候，我们需要去关闭这个定时器，那点的时候跟哪呢？

点的时候是不是跟这儿啊，哎，那我们在这儿来写一下，在这儿我们要什么呢？我们要关闭我们这个自动切换的那个定时器啊，关闭自动切换定时器，那这块怎么关啊，那我是不是先得获取这个定时器那个标识啊，诶那个timer，所以这里边呢，我来一个挖一个这个timemer，看我写这行不行啊，写这他说看不着啊，诶所以咱们干嘛呢，给它提出来放在这，然后呢，这来一个这个timer，等于它这样它是不是就能能看见了，哎，能看见啊，这儿我们来定义一个什么呢？定义一个这个自动切换的这个定时器的一个标识，那现在我要停就好，停了，直接在这儿我来一什么呀，来一个这个clear inel，哎clear inel来一个timer，这是给停了呀，这回你一保存再来一刷新，你再点最后一个，你看我们可以很潇洒的，一直到最后一个，它也不会出问题啊，也不会出问题还可干嘛呢，很潇洒的。

返回到第一个，它也不会出任何问题，但是呢，哎，就再也不会出问题了是吧？哎，麻辣它是不是不动了呀，为啥呀？诶你这一关是不是就永远关了呀，所以注意我应不应该再开起来呀，当我这个切换动画执行完了，你这个定时，你这个自动切换是不是应该再次开启啊？哎，还要继续播啊，继续播，那我怎么去开启呢？是不是调用一下那函数凹凸甚啊哎，那问题来了，什么时候掉啊？是不是当我这个动画执行完的时候掉啊，诶我这个动画一执行完了，我这块是不是可以掉那个auto凸change啊，哎，那我怎么知执行完了？

回调函数吧，哎，回调函数一执行，是不是证明我这个动画执行完了呀，所以注意在这儿来写一个回调函数，我们都留着呢啊留着呢叫什么呢？叫做动画执行完毕，我们要干嘛呢？开启我们这个自动切换，直接再来一个这个凹凹凸Han，然后一保存咱们来看啊看效果一刷新还是现在自动切换还有没有有呢？对吧，我点最后一个开始手动切换，然后呢，手动切完了又开始。是不是自动切换呀，还是我一点是不是又手动切换了呀，诶手动切换完了以后才会有什么呀，自动切换，这样是不是就没有这个干扰了呀？诶没有干扰了啊好，那这个呢，这个图呢，我们就给它完成了啊，这个轮播图我们给它完成了啊这么一个东西，其实这一块就是把这一段思路呢，稍微理一下，就是一下子一瞬间回来这块稍微看一下，其他的呢，他都不难啊，其他都不难，把这个图呢，自己尝试去画一下啊好，那我们这儿呢，停一下啊。