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

看个问题啊，刚才好多同学我看见这么写的，就是怎么写的，你这非先进写一个这个window.lo是吧，诶windowlo这块我是写这了，那个同学怎么写的，他这样写，他把这东西干嘛呀，写到写到这个块的后边去，那这行不行啊，你写外边写白天四白天记，你没有写进去的时候跟没写一样啊，所以注意啊，这东西你一定要写到这个括号的这个里头去啊里头去这样才起作用啊，这是一个，然后咱们就接下来呢，我们学完这个do一些基本操作啊，其实do的比较简单，只要你个面向这个对象的一些操作，你能会do，其实你就都能学会啊，都能学会没啥问题，那学到这儿呢，其实我们就可以做一些这种小的一些，小的一些这个效果出来了啊，小的一些效果出来了，那比如说我这块呢，诶有这么几个这个图片啊，有这么几个图片直接来干嘛呢？CTRLC把它复制过来，复制到我这个项目里，那这个东西我要做一个什么呢？做一个小的一个练习新。

新建一个这个email文件，我们来一个这个零九来什么呢？来一个这个练习，练习呢，在这儿我来一个div div给他直接来一个这个ID吧，叫做一个al啊外边一个div，然后在div里边我创建一个MG标签来引入这个什么呀，图片一点对pd al我可以写一个叫一个这个冰棍，冰棍是吧，冰棍然后呢，在下边我来写一个什么呢？创建一个这个button button我给他一个ID，这个ID我们叫做一个这个pre啊pre咱们这写一个写一个这个上一章，然后呢，这写一个来一个什么呢？下一张，下一张我就来一个这个next啊一保存CTRL运行是不是这么一个效果呀？诶这个按钮点击按钮应该可以去切换这个图片，但这页面吧，有点有点难看是吧，我们来设置一下它那个样式啊，咱们来看这儿能看出来这个这个图片稍微有点。

大科。看不全，那得到咱们就还是在外边看这边我们来设置一下样式style标签来一什么呢？先来一个星号，来一个这个Mar丁零，来一个拍顶零，大家记得吗？去除我们这个默认的样式吧，来默认样式，然后来什么呢？来个井号al来设置一下我们这div的样式，Div的样式我先看这图片多大致啊，打开我们这个目录图片500啊，500乘以333，宽度是500，哎，宽度是500，我们直接来一什么呢？来一个500个像素啊，高度我们就不设置了，然后来一个Mar丁，来一个这个零，然后来一个高度干嘛呀？是让他在居中啊，诶居中，然后一刷新走，你是不是整个居中过来了，居中过来有点靠靠上，让他往下来一点，来一个这个呃，50个像素，然后一刷新走，你是不是下来了，诶下来了，下来以后呢，这按钮咱们给它设置一个这个背景颜色吧，来一个这个background color，来一个这个yellow green yellow green。

一刷新王你是不是出来了，咱们还有点难看是吧？来给它加一个这个拍点，来一个十个像素四个方向十个像素的一个拍景一刷新，哎呦呵，这颜色是真难看啊，来个古润yellow好看，一刷新去，哎好多了是吧，诶掉一个有神奇的效果是吧？有神奇的效果啊然后呢，这个按钮吧，它这靠左了是吧，我现在看到往中间去去啊，咱们有一个样式，样式忘了说没说了，叫做一个text啊来可以设置我们这个内联颜四一个居中的，来一个什么呢？Center啊center设置我们这个文本的一个居中啊设置我们这个文本居中，文本居中呢，其实我们的内联元素你可以当成一个文本一刷新走，你是不是过去了，诶过去了啊，这么一个这个界面我们就搭建完了，待会自己来快搭一下啊，比较简单，那我希望什么功能啊，我一点这个上一张是往上翻一张啊，我点这个下一张是不是可以往往。

下翻一张啊，哎，这么一个功能，这上一张下一张还有点不太明显是吧，就这么一效果啊往上翻，那么这样给这上一张前面再加一什么呢？加一个这个这个小句号，这者加一个这个大一块这样写啊这样这样没啥区别是吧，还是删了自己改是吧，自己改去啊然后呢，这一块我们要实现一什么功能呢？我一点这上一张，它往上切换一个图片，一点这个下一张网往下切一个图片，那这个东西肯定得用我们这什么了，诶GS来完成了，来那们来看怎么写这东西，咱们一步一步来写啊，慢慢来，不用着急script的标签先写个什么呀，哎，window.on等于个这个方上来，你就先把它写上，肯定是没错的啊，写上以后呢，在这里边我们是不是要实现功能啊，实现什么功能，再说一下叫什么呢？点击按钮是不是切换图片啊，哎，点击按钮切换图片，它这个功能怎么做呀，点击上一张往前翻，点击下一张是往往后翻呀，往。

登表要怎么去做呀，你总首先我你看看啊，它这功能一步一步来吧，让你干嘛呀，让你点击按钮切换图片，就说当你点击的时候，你是在切换呀，所以你需要先干嘛呀？哎，你是不是先要找到按钮，并给这两个按钮是是绑定这个单击响S吧，哎，所以我们第一件事先在干嘛呢？先来获取我们这个两个按钮，获取两个按钮直接画一个是不是有ID啊，诶这来一个这个PEV等于一个这个doin的，点一个get and by ID，然后这再来一个什么呢？Y一个这个ne等于一个dolin的，点一个get and by ID来一个这个ne，两个按钮是不是有了呀？哎，然后我们来干嘛呢？诶分别为两个按钮来绑定我们这个单击响应函数，来一个brave，点一个这个啊click，诶，等于个方式bra应该干嘛呀，就是上一张啊，哎，上一张这是我们说。

向前翻是吧，诶来一个这个乐上对叫做一个什么呀，上一张，然后一保存，然后下边呢，我们来直接写一个直接呀，复制了，下边是我们这什么呀，next.uncle这个呢，我们来什么呀？诶下一个。下一张我一保存，现在我们来看效果，我这一点来一点走你，诶是不是上一张啊，再一点走你，诶是不是下一张啊，诶这玩意儿非常的高科技是吧，就实现了啊就实现了，当然这块你这乐T一个没用是吧，我们是不是得真得翻呀？哎，真得翻那怎么翻呀，我要切换图片吧，诶我要切换图片，那要怎么切呀。诶，那我们来看我这图片显示是不是显示这src啊，大家想牵着图片实际上就是修改呀，是不是修改src啊，SRC1变是不是就就换图片了呀？哎就换图片了啊，所以这块你要注意了，我们说了我们要干嘛呢？哎，对，当然不用变，我们是手动改的是吧？诶要切换图片我们说什么呀？诶就是要修改我们这个img这个标签这个SLC属性吧，诶修改我们这个img标签的这个SC属性，当然你像我刚才那么修改是有点扯的是吧，你不能他点一下，你给他改一下是吧，这个不太限制，你得什么时候改呀，是不是点的时候改呀，诶点的时候改，而且你得通过什么呀，通过这个代码去改吧，诶通过代码去改，那这块既然要修改这个mg.SLC，那我们就要先要干嘛呀，我是不是要找到这个MG标签啊，诶我这一看MG标签它也没有没有ID是吧。

你可以给它加一个，但是我们想想我能不能获取到，不加ID能不能获取到，是不是通过贝签名去获取啊，哎，直接来一个获取什么呢？我们这个img标签直接来一个Y，一个MG，等于一个document表，一个get elements白诶，Tag name t name来一个什么呀，MG这不是获取到了呀，但家注意这个获取到是谁乐一个这个MD，这返回的是一什么东西，我一刷新走你是什么呀？集合是个数组是吧？诶是个数组，那数组你能不能操作呀，不能操作，你得是操作数组里边那个什么呀，元素吧，你得操作那一个元素，而不是操作整个数组，那我们说了，我这数组里有几个元素啊，是不是只有一个呀？那既然已经确定只有一个了，那干脆干嘛呢？在这加一个中号，来个什么呀，零，我是不是把这第一个取出来呀，这样我们来看它是谁这意保存，你放心是不是变成什么了，HL这个MG这个element了，诶element啊，所以注意这个方法呢，你用的时候它一定是返回的是一个数组。

即使你只有一个元素，它返回的也是数组，那我们看嘛，我们，但是我们已经确定它是不只有一个了，所以加一个索引零，把那一个给它拿过来是不是行了呀？哎，拿过来行了，好，Img也有了，单击响应函数也绑定好了，那接下来呢，接下来呢，哎，是不是该点了呀？诶我们来说点击这个NEX是不是切换到我们这个下一张啊，所以这块我们说切换图片就是修改我们这个img的这个src属性，那怎么改啊，怎么改属性啊，我们说要读属性怎么读啊，是不Img.src啊，那要改呢，是不是等于啊，哎，等于啊，所以注意要什么呀，要修改这东西跟我们这对象其实都是什么呀一样啊，要修改一个元素的属性，就是我们这个元素点属性等于一个，这什么呀，属性值吧，你要修改src，它原来SSC是这样，是不是这个一点就别这样。

哎，你得改回改成什么呢？改成一个二点之一就行了，哎，这就行了啊，然后我一保存咱们看效果，这样我一刷新现在是第一张对吧，我这一点你。是不是就变了，诶是不是很好是吧？诶再点一下呢，再点一下呢，就没用了，为啥没用了呀，你再点它是不是也是换成这个二类，是不这样诶那我们可以把上一张也改一个，上一张来一个改成我们呢，改成1.6g啊改成1.bg，这个看效果啊，一刷新下一张上一张下一张，上一张下一张下一张哎是不是就完成了是吧，但是说半天还是什么呀，这俩图是吧，俩图是切换着也挺没劲的，我一共是不是五张图那呀，所以你注意了，你这块直接改成这个路径的，你改半天你点上一张永远换到什么呀，1.dvd，点下一张是不是永远换成2.dvd啊，而我们需要什么呀，我是不是需要在五张图片之间进行切换呀，哎，在五张图片之间进行切换，所以这个呢有点不好，那我这有几个路径呢？是不是有五个路径啊，我需要在五个路径之间进行切换，那怎么办？

那首先我是不是得先有一个地方能把这五个路径给它存起来呀，不然你这没法写呀，对吧？所以干嘛呢，我们先存哪儿呢？诶我们来创建一个数组用来干嘛呢？用来保存我们这个图片的什么呀，路径直接挖一个IG一个数组等于什么呀，中号，然后把这路径往这一复制，然后呢，我这CTRLC粘过来，然后逗号写呗这。

呦呵，走你走走走是五个路径啊，咱得改啊，这是2.gbd，这是一个3.gbd，这是一个4.gbd，这是一个5.gbd，是不是就行了呀，那行了啊，现在我们这个路径都在这儿保存着呢，啊都在这保存着呢，那这里边我就可以干嘛了，我这写一个imd瑞来什么呀，中号。零是不是就第一个图片啊，哎，那下边呢，我来一个中号什么呀，中号。

一是不是就第二个图片，诶，我一保存，这回咱们看看有没有什么进步啊，下一张上一张下一张上一张是不是还是一样啊，费半天劲呢，其实还一样，这还一样啊，你这是不是还是写死了呀，零和一是不是都是固定的了，哎，所以不能这么写了，那怎么办呢？那我们来说，我这需要做一件事儿来干嘛呢？我要来创建一个变量来干嘛呢？来保存我们当前正在显示的那个图片的什么呀，所以啊，正在显示图片的索引，我这直接来一个画一个，随便写一个吧，Index等于什么呢？等于零，为什么等于零啊。我们默认是不是显示的是第一个呀，哎，所以我认这个索引是零啊索引是零，然后呢，当我要切换到上一张的时候，这索引该干嘛？呃，切换到我们这个上一张，我们这个索引干嘛呀，索引是不是应该自减呀？诶所以我这来一什么呀，Index减减自检，假设现在是第四个，我一自检是是变成第三个了，再自检是是变成第二个了，然后这就不能写零了，写谁呀index啊写index，然后下边我们说切换到我们这个下一张叫什么呀？是不是自增了，诶这就耳朵就给你去了啊这是我们说切换到我们这个下一张，哎使我们这什么呀，Index自增，直接就来一个index，来个加加，同样这块路径，这我也改成什么呀，不写一了，写成什么呀，Index，这样你index值是多少，我是不是就写多少了，哎，咱们这。

看看行不行，一刷新来下一张，诶，切过来了是吧，再来是不是又切了来再来是不是又切了呀？诶再来是不又换了来上一张走。走走。走是不是行了，再走没问题，我上一张是吧，也行，咱们这点哪都行是吧，一点问题也没有啊，一点问题没随便点啊随便点哎但是有啥问题呢，来咱们看着啊上一张上一张这是什么了？这第一张啊诶第一张我这一点来走你哎呦妈呀，冰棍出来了是吧，再来点下一张走走走走走最后一张了吧，再点卡，这不又冰棍出来了，这是为啥呀，这是为啥呀？诶来看啊哎哪的问题，咱们来看一眼这个开发者工具吧，现在我们来选出这个图片，就看这个图片片路径，现在是5.dvd是吧，5.dbd是不，我那个最后一个图片了它的，所以应该是四对吧，所以四你再加加变成几啊变成五，可是我数组里边。

一共最大索引是不是就是四啊，你变成五了以后还有吗？没有了，所以你这下一张它是什么呀？是不安底范的了，诶你出安底范它是不就找不到这个图片了呀？同理你上一张上一张一直到第一张第一第一张的索引是什么呀？索引是零，你再减变成几了？是不是负一了？负一是不是又安底范的了，诶又万的啊，所以注意我们来看我这减减减减，我这东西能不能小于零啊。

能不能小于零啊，不能小于零吧，哎，不能小于零，所以这块我们做一个判断，判断什么呢？判断我们这个index是否小于零，来一个什么呢？If引带干嘛呢？小于零，你最小值是不是就是零啊，如果你小于零我干嘛呢？我让你等于零，哎，如果你小于零，我就让你干嘛呀，等于零，说白了你翻到零，这你还不能往前翻了，你是不是就翻不动了？哎，翻不动了啊，然后我们来看效果，这一刷新往前翻走，你走你走你是不就不动了，哎，就不会出现那个什么了，冰棍了，然后再看下一张，那我们这个引that加加加，它是不是一个最大值啊，最大值应该多少，是不是四啊？哎，所以我们来一个if，我们这个什么呀？隐ex干嘛呢？哎，大于四，大于四，你能不能大于四啊，不能，你最大是不是就是四啊，哎，最大就是四，我这一保存，咱们这个才一刷新往下翻，往下翻，往下翻你就翻不动了，哎往上翻，往上翻就翻不动了，就不会出现什么了，那个冰棍那个情况。

但是注意啊，这有个问题，我这写四好不好，现在我是五个图片，如果我这少了一个，或者我多了一个，这是不是就不准了呀？所以写四呢，不好，我们最好什么样写一个变量应该是什么样MG和点对吗？诶Les是我们这个最大索引，加一吧，我要找到最大索引还在干嘛呀，我减一啊，同样这也是等于I这点Les干嘛呀，减一这样是不是才对啊？诶你这回一保存，一刷新，下一张下一张下一张下一张上一张上一张上一张是不就完美了，哎，就没有问题了啊，没问题了。

但是呢，这种体验有时候不好，你会感觉我们这图片吧，它有点少是吧，一翻翻不动了，这个开点的是吧，哐到那还点点点换换到第一，哎对我们说了，你当你是最后一张的时候，我再点下一张干嘛呀，是不是应该咔咔咔咔咔回到第一张啊，哎，当你是第一张的时候，应该咔咔咔咔咔是不是回到最后一张啊，哎，我接着说让你干嘛呀，循环吧，我怎么能循环起来，哎，其实我是不是把他们这个当成给他换一个，如果你index小于零了，我就让你隐ex等于谁啊，是不是等于我最后那个索引啊，果你index大于我那个最大索引了，我让你干嘛呀，等于零让你回去，诶这样我一保存，其实就调一个位置就行了啊，然后你刷新你这第一张往下翻，翻翻，这是最后一张了吧，再走，是不是回到第一张了，诶，翻翻翻，是不是永远循环着转了，哎，永远循环转了，你这第一张往上翻第一张对吧，往前翻是不是就转到最后一张了，哎，永远就是循环的。

卷转起来了啊，全都转起来了，好，那这个呢，我们就给它整完了，整完了以后呢，待会我们来看还有什么小问题啊，我们需要优化一点啊，优化一点什么呢？现在我这翻半天吧，我这图片，这图片是第几张啊，说不知道啊，哎，不知道有你翻翻的就忘了什么样，这片是第几张，或者说我一共有几张图片，我是不是就也不知道了，诶那我怎么办呢？我一想我希望这么一个效目，我在这儿啊，放一个这个P标签，P标签里边干嘛呢？我写一段这个提示文字，写个什么呢？哎，我们说一共一共什么呀，一共五张图片，当前呢，第第一张，我说希望有这么一个提示啊，诶当然你可以给他来点距离，这样我稍微能能那个好看一点啊，这样一保存，我们这一刷新走你，诶是不是一个提示啊，一共五张图片，当前第一张，哎这样就好多了，来点下一张1000万走你，哎哟怎么还第一张是吧？走你还第一张这。

这种不变呀，它为啥不变，诶这要变才新鲜的了是吧？诶你往这写死了，压根是不是没改啊，所以注意这个东西能不能写死了，不能写死了，我们最好是不是还是动态去设置一下来，咱们给他一个ID叫一个什么呢？叫一个iner吧，哎信息那这里边我们来干嘛呢？在这最上来我在这来干嘛呢？现在我这个音份，我这一保存，现在刷新是不是没有字了呀，没有字了，所以这里边干嘛呢？一上来我来设置什么呢？设置我们这个提示文字，什么提示文字呀，我是不是先得获取这个音for啊哎，获取我们这个ID为这个in for这个什么呀，P元素直接来一个far，一个这个in等于个这个document，点一个get and版ID来一个in，是不就获取到它俩，然后呢，要干嘛呀，我说要设置这个提示文字呀，诶直接来一个吧，怎么设置提示文字呀，说白了是不是就往这里边写字啊，那怎么写呀，哎，是不是就音。

点一个in，哎哪啊，如果你直接点的话是读，如果你写赋值是不是就给它设置了呀？诶咱们来看看，诶你看我，诶出不出来，你看我在哪吧，写这么一句话，然后一保存，咱们来看你发现。是不是就设置上了，诶那所以接下来我们要做的事儿什么呢？就是把我们刚才那句话是不是给它粘这啊，诶这样一保存一刷新封你，诶一共五张图片，当前第一张是不是就完美了呀？诶这就设置上了，但是呢，你再看，不然没变呀，你注意了，你这玩意有点什么了，多此一举了，这虽然你写这儿了，但是其实还是什么了，还是写死了，一共五张图片，你是不是老是显示五张啊，你以后即使变成六张了，就是也是五张啊，当前第一张是不是永远显示第一张啊，你这也没改，所以这块注意你这五能不能写死了，这五应该是多少，是不是应该是我数组的长度啊，数组有五个元素长，是不是就五张图片，数组有十个元素，是不是就十个图片啊，所以这块呢，写五个不好，那应该干嘛？我是不是应该给它拼一个串啊，加上一个谁啊，Imgra点一个Les啊，Img lth啊，所以注意这是我们这个变量的一个。

好处，它可以随着我们这个去改变，你这样一保存走你是五张啊来咱们看着干嘛呢，我这删一张，我一保存是四张啊，诶你加一张，他同样也可以去增加啊，也可以增加这样就好了啊但是还有一个什么问题呢？当前第一张这是不是还是写死了呀？哎当年第几张还是写死了，那这块当年第几张应该怎是不是第引贷几张啊？哎，第贷的张行不行呢？哎引贷的是索引，索引是从零开始的是吧？诶我们这如果直接加上一个index，你这一保存一刷新是不是第零章啊？诶那这用户一看就封了是吧？第零章什么意思是吧？那你要程序员你知道零是索引是吧？啊这用户肯定不知吧，零啥意思是吧？所以你这块需要什么呀，给他加上一个，一加上个一的行不行啊，加一行不行啊，诶加一变成那呀，那肯定变不了是吧，我们来看效果啊。

这一刷新走你诶D01挺好是吧，哎还显得我这图片比较多了，但是这对不对呀，对不对呀，那为什么变成零一了呀，为什么变成零一了呀，诶咱们现在number是零是不是零一呀啊number我增了变成什么变成一了，我这保存这一大自增啊变成一了，一刷新天呐。1亿张了是吧，又变了，又自动了变成了，变成二了，来什么呀，看不二一张了，这是为啥呀？加一怎么最后变成二加一怎么变成二一了？哎，我们说了计算是不是从左往右啊，哎，这一加干嘛了？拼串了吧，两个串一加是不是又拼串吧，你说前边整体是一个字符串吧，字符串加inex干嘛了？又拼串了吧？一代跟一加是又拼串了，所以你这么一写，整个完成了一什么呀，拼串的一个操作，那你说了，你这index和一这个相加用不用拼串，不用拼串那怎么办？哎，直接拿个块给它括起来，你俩呀先算啊，你俩先算，这样一保存就没有什么零异了啊，就直接是第一张啊好，那这块动态设置我们就设置完了，来咱们看看下一张，下一张，哎哟，省了半天是不是浪费感情了？还没变是吧？为啥没变呀？不是卡住了是吧？

还是那句话，它变了就新鲜了，一定知道为啥没变，它就应该不变是吧，为什么不变，我希望我点的时候，它是不是这个字跟着变呀，但是注意我这个设置什么时候设置啊，是不是一上来就设置啊，当我点按钮的时候，我有没有设置，没有设置所以干嘛呢？在最后在这应该干嘛呀，当我这个点击按钮以后应该干嘛呀，应该重新重新是不是设置我们这个。

信息啊，诶，所以我每一次点按钮，我是不是应该都把这个代码再执行一遍啊，每点一次就应该执行一遍，所以这里边呢，我把它干嘛呢？CTRLC给它粘过来，这是我们这个向上翻的，然后CTRLC往这个向下翻，这也来也来一个是不是就OK了呀，这样我点向上的时候，它会重新设置一下信息，点向下的时候是不是也会重新设置啊，诶咱们来看这回行不行，一刷新现在第一个来走你。是不是第二张了，诶来再走是不是第三章啊，再走第四张再走，第五章再走呢？诶是不是又回到第一张啊，哎，这样就循环就转起来了啊，可以在这儿动态的去显示一个这个它的一个信息啊，那这样一个图片的一个切换的一个小功能呢，我们就给它完成了，这东西应该不算难吧，诶一步一步就给他完了，写出来了，诶思路呢，应该还是比较比较清楚的，所以这里边我希望你把这东西给他认真的去写一下，这东西呢，虽然简单，但是以后我们遇到的这个所有的题呢，其实都是什么呀，都是这么一个思路干嘛呀，你想实现一个功能，肯定要先绑定个响应函数，无论是单击啊，还是双击啊，还是加向函数，你得先干嘛呀，你得先找到我什么时候来开始这功能，你先找到什么呀，你要绑定那个函数这个对象，那这里边我们就找到谁呀，是找到这个两个按钮啊，哎，给他们绑定一个单机啊来说当你单击以后，你是要做一些事儿啊，诶做一些事儿你要切换图片，你就找MD，切换一些其他功能就找其他标签啊，所以这块注意都是这么一个套路。

就是两步什么呀，找对象，找对象啊，找对象搞对象，其实我们整个一个学习过程当中呢，都是在践行这两句话，你会觉得这两句话干嘛呀，说的越越品越对是吧，越品越对啊，来我们这来评一下啊。