128.尚硅谷_JS基础_切换图片练习

那我们讲了一下这个定时调用，那这个东西说完了以后，其实我们就可以做一些这种小的效果了啊小的效果了，比如说我们可以尝试做这么一个功能，诶来啊，我这里边还是我这有几个图片，12345们这五张图片，CTRLC呢给它粘过来，粘过来以后呢，然后呢，咱们就写简单一点啊，主要是看这个顶要用怎么用来什么呢？零五我们来一个这个看一个练习吧，然后呢，在这里边我直接来一个这个图片来一个一点注意力力保存，这图片是不是在这显示出来，呃，图片是显示出来了，但是这图片咱们在外边看看外边看能大一点，图片显示出来以后呢，我希望做一个效果，什么效果呢？现在这图片一放这儿，它是不是就就不动了呀，诶我希望这图片可以可以切换，而且干嘛呢，而且呀，自动切换，哎可能第一秒是这个图片，第二秒呢换下一张，第三秒呢换下一张，以此类推，是不是自动去切换这个图片啊，诶自动去切换这个图片，那这个东西我们要怎么去找。

那首先要切换图片，是不是就修改我们这个src属性啊，诶那这里边我们来看怎么去做它啊，直接来一个ID，我们叫MG1吧，这起一个ID，然后呢，来一个script的标签window，点一个onload等于一个function function我们来干嘛呢？来来做这么一个功能啊，先描述一下使我们这个图片可以什么呢？可以诶自动切换啊可以自动切换，那我先来解决第一个问题，那我要用图片自动切换，我是不是要在这个去修改这个S属性啊，诶所以我们先来干嘛呢？先来获取，获取我们这个img标签，直接挖一个IMG1等于一个doin的点一个get的100ID，来一个IMG1标签是不是有了呀？然后说我们要修改的是什么呀？Img1.1个SR，诶点一个src是不是等于一个什么什的值啊，那修改这个值我可以等于。

1.gd可以等于2.gpd可以等于3.gpd等于谁都行，但是现在有一个第一个问题，这东西我得干嘛呀？诶我是不是先得有一个地方去保存这个图片啊，哎，保存这个图片的一个路径，而这个最好的选择就是什么呀？来我们创建一个数组，来个马路来保存我们这个图片的一个路径，直接画上一个MG，一个瑞等于一个这个中号路径，我一共有五个，1.bd，一直到5.dbd，那所以呢，这块我直接把这干嘛呀，给它复制，这是一个，然后第二个来一个这个2.dvd，第三个来一个这个3.dvd，然后再来一个这个4.dvd，最后来一个这个。5.dbd是不是一共有这么五个图片啊，哎，一共有五个图片，那接下来我要在这五个图片之间是不是进行一个切换呀，但是还有一个问题，诶我现在显示的是哪个图片，我现在知不知道他不知道对吧？所以我还得干嘛呀？诶我得创建一个什么呀，创建一个这个变量用来干嘛呢？用来保存我们当前图片的索引吧？诶所以直接挖一个index，让它默认等于谁呢？等于零，因为默认是不是显示第一张啊，诶显示第一张，那接下来呢，那我要切换图片，你要你要是直接这么写，那就没有E了，Mg array等于一个这个什么呀？哎，等于一个中二来什么呢？来一个这个二，这么写的没有意义了，是不是写死了呀，即使写index也没有意义，你即使写的是index，它是不是也只变变一次呀，我希望它是不是每隔一秒或者每隔两秒就变一次，所以这边我们需要干嘛呀？哎，我是不是需要开启一个。

定时器啊，诶来干嘛呢？诶来自动去切换这个图片啊，开启定时器来自动切换图片，来一什么呢？叫做一个set，一个inter啊set inter，然后我们这来一个function function，最后我们是不是还传一个时间啊，时间我就来一个，比如说我们就来一个1000吧，一秒钟啊一秒钟1000毫秒，然后呢，在这里边我就需要写点东西了，那首先我现在做一件事是什么呢？使我们这个索引要自增吧，诶是我们这个索引自增来一个这个dex，诶加加，哎是不是index加加呀，Index加加完了以后呢，那我这块干嘛呢？接下来来修改我们这个IMGE1的这个什么呀？Src属性等于什么呢？I之1.1个src等于谁呢？等于我们这个img和瑞，然后中号来什么呀，Index这能看懂吧，那这样我这个函数。

就是每1000毫秒，每一秒就调一次啊，每调用一次干嘛呢？它会让我们这个索引自增，第一次自增完了以后变成一，这是不是显示索引为一的呀，再自动变成二，显示索引为二，依此类推，是不是这图片就自动就动起来了，来咱们看效果啊，我这一刷新走你。

诶是不是自动就切换了，诶出问题了，怎么没了呀，你到那个，诶咱们看啊，这有个问题什么问题啊，我这索引是不是一直自增啊，你索引一直自增，一直自增，我这一共就五张图片，换句话说我最大索引是是四是吧，最大索引是四，你能不能大于四，不能大于四，你大于四后边是不是没了呀，没了就不行了，所以我们这需要做一个真的判断，我们这个索引是否什么呀，是否超过我们这个最大索引啊最大索引那怎么玩呢？直接来一个if，我们这个index大于谁呢？大于诶我们的一个大于等于吧，我们这个img arra点一个lengths，诶如果你比它这什么呀，总长度太大了，或者你等于五了，是不是都超过了呀？诶那则干嘛呢？诶，减减啊减减，它不就老跟那张图片转悠了吗？不能减减啊，则是。

设置为，诶则将我们这个index设置为零吧，诶来一个index等于零是不是就OK了呀？诶就OK了啊保存这样一看效果，诶还是等它转到最后一张的时候，它会干嘛呀？哎，是不是回到第一张啊，哎这样循环这给它转下来了，感觉我们这图片是不是没头啊，哎，没头啊循环转起来，所以这块注意一定要在这呢，给它做一个这个，哎做一个这个判断啊做一个判断好，那这一块呢，是我们说的这么一个问题啊，但是这一块呢，还有一种写法啊来看我不这么写也行，还可以怎么写呢？改一种写法叫什么呢？Index等于我们这个index模以谁呢？IG的瑞点一个length，哎，我这么写什么意思？什么意思？诶，咱们来看啊，当inex为零的时候，我M这个锐点length是几啊？是不是五啊？那零模于五等于几啊，是不是还等于等于零啊？哎，零模A5还等于零，那当我引X是一的时候，一摩A5等于几啊？一摩A5是不是还等于一啊？哎，还等于一，这能懂吧？哎，那你说同学说这么写有什么用？二模五呢，是不是还是二啊，四模五呢？

是不是四啊，哎，都是四啊，余数都是这么它它自己，所以这块写的好像没什么意义似的，但是注意一旦变成五了，五模A5得几了，是不是得零了呀，得零它是不是就从头开始了呀，所以这么写跟上面那个是什么呀，一个意思啊，一个意思，咱们看效果啊，我这一刷新。是不是这样又转起来了，哎又转起来啊，可以那么写啊，可以这么写一个意思啊，两种写法呢都行啊种想都行，或者你干脆什么呀，写一个index模等于m Le也是一样啊，也是一样，就这么一个效果啊好，那这块呢，我们这个就给它转起来了，对吧，转起来，但是我觉得这个版它不好，他有的时候他是不是一上来就转呀，我不希望一上来转，我希望什么呀？哎，我让你转，呃你再转吧，哎，那我需要来什么呢？诶这样我在这上边啊，给它加一个这个按钮，咱们在下边加，加一个这个BT来一个ID，我们叫做一个BT。

零一写一什么呢？写一个开始，我一保存，现在一刷新，这不多列按钮啊，按钮咱们往下走一点啊，往下走一点来了，换行一保存，对刷一个按钮，我希望什么呀，我点开始的时候你在动，我不点开始你是不是别动啊，哎，别动，所以呢，这一块我们需要个麻烦。诶，我是不是需要为我这按钮绑定单价是不是，哎，先来为我们这个BTN0一来绑定一个这个单击响应函数，直接挖一个B填零一等于一个document，点一个guide版ID，来一个B填零一，然后呢，我们来一个B填零一，点一个on click等于一个function等于function，然后在这里边我们来怎么办呀。

哎，我是不是很简单，我把这定时器给他放这里边就行了呀，哎放这边就行了，这样我不点的时候，这定时器开不开不开，哎不开，我这一刷新它是上来就不动啊，什么时候动，我一点按钮是不是开启定时器啊，一点走你它才开始干嘛呀，是不是切换呀，哎切换诶那这是好了，但是我有时候能开始了是吧，我想停，我希望我想看这个这个小熊这个照片，他说小熊我希望干嘛呢？停。嗯，他说不理你啊，我想看这照片，你赶紧给我停，让我看会是吧，他不理你是吧？那怎么办？哎，那我们是不是还得有一个按钮去控制它的停啊，哎来，那我们再来一个BT0202，这我们来什么呢？来一个停止啊停止，那现在我们这来干嘛呢？来为我们这个BT02来绑定一个这个单阶想要函数直接来一个Y一个BT02等于一个document的点一个盖100ID来一个这个什么呀，来一个BT02B T02，然后呢，直接BT02.1个on click等于一个三个人，我是不是一点它就停止了，诶点击按钮以后我们要停止什么呀，图片的一个自动切换啊，点击按钮以后我们要停止图标自动切换，那怎么停啊？哎，我把这定时器给它关了，是不行啊，哎，所以只需。

要干嘛呢？只需要关闭我们这个定时器，关闭定时器我们是是要可inel里边传一个这个拍啊，诶传一个变量，但是问题来了，这变量有没有啊，没有，我是得传一个变量去接收一下啊，所以这块啊，我直接来一个Y1这么写行不行，这么行不行，我这个变量是不是在这个函数里定义的呀，而我要在这个函数里用它看得着吗？看不着吧，它们作用域不同吧，哎，作用欲不同，所以我希望什么呀，我希望在这个里边也可以看到这个什么呀，Timer那怎么办呀？诶我是不是把它定义到这个外头啊，这样他们是不是都能看到了，诶来，我在这干嘛呢？定义一个这个变量用来干嘛呢？用来保存我们这个定时器的这个标识吧，哎，标识，那这里边就来什么呢？来一个这个timer等于它，那这里边可粒timer是不是就OK了呀？诶再看一保存，现在一刷新，我点开始它是。

动起来了，哎，我说这看着小熊停。是不是停了呀，哎，来，再点开始是不是动起来了，再点停，咔是不是停这了呀，再点开始走，你是不是动起来了，诶这样停是不是就停了呀？诶这么一笑，跟你看那个那个电视里边那个那个明星抽奖似的，是吧？诶开始，然后你说停，诶就他中奖了是吧？诶他中奖了啊这么一个效果好，那大家注意啊，我们这块要说一个问题，功能虽然实现了，我们先说第一个问题，什么问题呢？首先我们来看这儿，我这里边是不是就声明了一个变量，就做一个开啊在这有没有赋值啊，没有赋值，当我点击开始按钮的时候，是不是才给它赋值啊，诶当我点击开始了才给它赋值，那注意了，如果我不点开始，一上来我这time有没有值，没有值，它应该是什么，应该是安迪find的吧，那注意此时我一上来就点停止，那我们说了，我这相当于可粒尔in特尔里边传一什么呀，是安迪范的呀，诶那我们说这会不会出现什么问题。

咱们试试吧，F12，我们来看看爆爆四，我一点走你走你走你没事啊，诶我点开始。转起来是吧，不一定停，是不是也停了呀？哎，也停了，那这是为什么呀，我们来说一下啊这个问题，我们说clear可以什么呢？哎，可以接收任意的参数，甚至什么呢？甚至是什么none啊，Andde find呀都行啊，任意参数我们说什么呢？如果参数是一个有效的一个什么呀，有效的一个哎，定时器的这个标识则什么呢？则停止对应的这个什么呀？定时T如果什么呢？如果参数不是一个有效的这个什么呀？标识则什么呢？则什么也。

不做啊，也不做，所以注意你这即使是安妮犯也好，即使是闹也好，他干嘛呀，他是不会报错的啊，所以这个东西你可以干嘛呀，你可以放心的去，放心的传，看懂了吧，诶是这么一个意思啊，他传什么都行啊，有效就停，没效呢，就什么也不做啊，什么也不做好这看完了再看一个啊我这一刷新，现在呢，我这一点还是开始，然后一点停止，诶是不是很完美啊，诶那现在我这图片是干嘛的呢？我这图片是一秒钟是不是切换一回啊，诶一秒钟切换一回，那有的时候干嘛呢？我可能这个小手一抖是吧，咔，又扁了一下。

好像快了是吧，然后又抖了一下，有点帕金森是吧？诶好像快了是吧？来我有可能有点狂躁症，点点点点点点点点点点点点点点，哎，这是不是闪减了是吧？诶删减了，那这玩意儿你会发现我这东西是不是越点越快呀，那而而且咱们再再看一下，还要说一问题，你点快了以后什么呢？停走你停停停停停停停停停停停，我点多少回是不是也停不下来了，哎，我点多少回他停不下来了，失控了是吧？这是为啥呀？诶我这个是不是一秒钟切换一次呀，按理说速度应该比较慢是吧？但是我们会发现当我点快了以后，它是不是越来越快，越来越快呀，那这是为什么呀？为什么呀？诶，那你现在来看啊。

现在我这个定时器是写到了我们这个安可立克这个单机响应函数里边了吧，诶那现在干嘛呢？我们来说一个问题，那目前来讲，目前我们每点点击一次这个按钮就会干嘛呀，是不是就会开启一个定时器啊，你点一次就开一个，点一次开一个，虽然一个定时器很慢，但是如果我同时开了十个定时器，等于有十个东西是不是在切换这个图片啊，那你个一秒都在切换，那是不是变成这个1/10了，那实际上你要开了十个，就相当于是不是100毫秒值行一次了，哎，这速度会干嘛呀，会非常的快，你要点了100次，那是不是就开了100个定时器啊，哎，会非常非常的快，但是我们说了我有没有这个，那还有一个问题，那而且什么呢，就开启一个停时器，那为什么停不了啊，那你说我这应该能停啊，哎，你每开一个是不是就要复制一个time啊，每开一。

它就要复制一个，而我这个time是不是只有一个呀，它保存的总是哪个呀，是不是总是最新的那个，所以你只能关谁关，我最后点那次之前那个能不能关了，哎就关不掉了啊就关不掉了，所以还有这么一个问题，而且我们嘛呀，只能看，只能干嘛呀，只能点击，只能关最后一个啊，只能关最后一个，所以这块注意啊，每点击一次按钮，就会开启一个定时器，点击几次，诶点击多次就会什么呢？就会开启多个定时器，这就什么呢？诶这就导致我们这个图片这个什么呀，切换速度是不是过快呀，哎，并且什么呢？并且我们只能干嘛呀，只能关闭最后一次，哎开启的这个定时器，其他的我们是不是都不能处理呀？诶所以这块就带来一个问题，什么问题啊，就是你同时跑多个定时器，这样是不是不好啊？

那这玩意儿怎么办？我这边不想跑多个定时器，我这一点现在开启一个一个就是跑的挺好的呀，我就想开一个，最多就开一个多了我就不想开了，但是你拦不住点是吧，那他点了怎么办。也就是说我现在只希望它开启一个，那我怎么办呢？哎，我们在这儿来说，诶在开启我们这个定时器之前，我们需要什么呢？我们需要将上一个定时器给它干嘛呀，是不是关闭呀，来一个clear一个inel，来一个这个开R干嘛呢？我在开启之前，我把上一个给它关闭了，那这样你开启一个关一个关一个开一个，关一个开一个，那在我们这个图片上的定时器是不是同时只有。

一个呀，那这回还会不会出现那种同时有多个定时器在跑的情况了，是不是不会了，哎，我们再看啊，这块一刷新我这一点。哎，是不是运行了呀，来走你快不快呀，没快走你走你走你走你走你走你。有没有快啊，没快，但你其实有一个小问题是吧，当你老点的时候同样不动啊，因为它总是在关闭上一个定时器吧，哎，上一个定时器啊，那这个不啥问题啊，然后你停止走，你是不也能停止啊，哎，这样就可以了啊，所以注意你在开启一个定时器之前一定要关闭干嘛呀，上一个哎，避免它出现这个速度过快这种情况啊，那看到这儿了啊，我们来说一个这个东西啊，你要注意了，我要关闭上一个前提是什么，我这两个定时器，我这个定时器是不是给同一个元素开启的呀，假设我这个定时器是给MG开启的，另一个定时器是给谁呀，给H1开启的，那那个东西我我用不用关呀，不用关他们两个操作的，它不是同一个元素，两个同时跑，同时跑了，我们关闭前提是什么呀，是同一个元素啊，同一个元素啊，所以就是注意开启定时器之前需要将什么呢？将我们这个当前元素上的，哎，其他定时器。

点关闭，诶如果你这块设置是两个元素，你这是MG1，那个是G2，那你关不关都行啊，关不关都行，所以这块一定要注意啊，这是要关闭当前源头上的其他定时器，好，那这个定时器呢，我们就给他说完了，哎说完了以后呢，这东西其实呢也不难啊，但是以后我们做的一些这种简单的这些动画效果，基本上就离不开这个什么了，定时器，那你像这时候一个小的一个图片切换，就是一个小的效果呀，哎，就需要用这个定时器，包括昨天我们讲的什么呢，我们昨天讲的那个。

练习练习，我们有一个这个键盘这个练习啊，我给你拖回来。CTRLV给它粘过来，这个呢，是我们这个。改一个吧，0606，这是我们这个div啊，移动div的这个练习。我们这CTRL1运行，我发现什么呢？这个div移动起来还是挺好的，但是它总是干嘛呀，按着一个键不放的时候，它会有一点卡顿，诶第一下会卡一下，我说这是由于它防止我们这什么呀，误操作是吧，诶误操作，那现在我们学了这个定时器了，待会儿你来思考一下，我来怎么去解决这个问题，也就是说我不让他干嘛呀。不让他卡啊，不让他卡，待会儿你们来思考一下啊，来做这个练习，然后思考一下这个练习啊，来听一下。