135.尚硅谷_JS基础_完成点击按钮切换图片

这啊，那这个界界面已经完成了，那咱们来完成一下这个功能，那功能其实咱们主要做两个功能啊，两个功能第一个什么功能啊，我一点这个小点的是不是可以切换图片啊，诶切换图片，所以第一个功能我们要做的是什么呢？我在这来写一下叫什么呢？叫做点击我们这个超链接，叫切换到我们这个指定的这个图片啊，点击超链接切换我们的指定图片，那我们说怎么切换的呀？点击第一个超链接，点击第一个超链接显示什么呢？显示第一个图片，点击这个，诶第诶二个超链接是不是显示第二个图片啊，我就不再多写了啊，这都是废话了啊，第二个图片，那点击第三个显示第三个，点击第四个图片显示，显示第四个呀，诶，显示第四个啊这么一个东西，那这事其实我们都熟了，我应该先干嘛呀。点击超链接，那我是不是要给给超链接绑定单机函数啊，哎，绑定单项函数，所以这里边我们来为什么呢？为所有的这个超链接都绑定我们这个单击响应函数，直接来一个负去先变例Y一个I等于零，然后I小于我们这个OA，点一个Les，然后来一个I加加是不变利啊，然后这个OA。

然后来一什么呢？I点一个on click等于一个function function呢直接来一个alert一个这个哈，保存咱们来看效果，现在我一点走你是不是hello啊，这也走你是不是也hello啊，哎，点谁是不是都是。Hello啊哎，这一块就OK了啊，单击响应函数绑定完了，那接下来呢，接下来要干嘛呀？是不是切换图片了，点击第一个超链接显示第一个图片，点击第二超链接显示第二个图片，那问题来了，我点的是第几个超链接啊？

首先我说我点的是哪个车链接，我知不知道，你知道这次是不是就是这次就是啊，我一刷新走你是这个呀，再点是不是就是它大家注意我们知道是谁不重要，我得知道什么呀，我得知道它是第几个吧，哎，我得知道是第几个，所以第一件事我需要干嘛呢？我需要诶知道我们这个，诶叫什么呢？叫做获取我们点击超链接的什么呢？超链接的索引啊，我要获取我点击的那个超链接的索引，那怎么获取，诶我这alert I行不行，行不行。可以是吧，这问题咱们以前演示过，哎，这是一个单机响应函数，外边是一个负循环，他们的执行次序是什么？先执行负循环，然后执行单减函数吧，也就是说当我单击显函数行的时候，负循环人家早就执行完了吧，那复循环都执行完了，I是几啊？I是I5吧？哎，我最大长度应该是五，所以你就会发发现什么呢？你点每一个。

是不是都是我，诶所以你I能获取到吗？获取不到哎，注意啊，一定注意他们执行次序是先干嘛呀，先执行负循环，再执行什么呀，单击响应函数啊，单机响函数，这就像什么呀，这就像我这块，可能我是一个假设我是一个卖苹果的，卖苹果呢，我家有一个大筐苹果，然后呢，我要干嘛呀，把这些苹果装到小筐里边去，去卖，诶可能有一堆苹果是吧，一堆苹果然后往里装，我说我就数，诶从大框往小框里数啊，你应该能想到这个镜头是吧，我这数一个两个，三个，四个，五个，六个，七个八个，假设我装了八个苹果，那现在我从这个框里我随便拿出一个苹果来，那我问你这是第几个，知道吗？不知道吧，你装的时候你数的，你取出来的时候是不是。

就没数了，哎，你不知道你拿的是第几个，那怎么办呀？那怎么办呀，咱们先把苹果这问题解决了，这是不是一个意思呀，你现在是一个一个绑定的单项函数，绑定完了，你是不是不知道它是第几个了，那现在就需要知道怎么办，诶那我这么想呗，我这个苹果我拿出一个，第一个苹果我咬一口放里边，第二个苹果咬两口放里边，第三个苹果咬三口放里边，第八个苹果咬八口就是变成胡了是吧，变成胡了，然后来人买苹果了是吧，说我要递八个苹果，他把胡拿出来了，这是第八个，甭管说这个招高不高，但是至少我们是不是可以知道我们这个是第几个苹果了，诶，第几个苹果了，那其实你不一定得得咬是吧，可以干嘛呀，拿个笔写上是吧，或者贴个标签是不是都行啊，诶贴个标签，那同样我能给苹果贴标签。

我能不能给我这个超链接标签呢？诶，但这是为我们这个超链接来绑定单接响应函数，那我能不能给他提个标签呢？那我是不是希望我们的这个每一个超链接都能去保存它自己的那个索引啊，诶那我想想，那我现在这个O这个A，然后一个哎，这个代表的是谁，是不是代表的我每个超链接呀，然后来什么呢？点一个这个index，点一个index什么意思，我是不是给它添加一个index属性啊，来什么呢？来等于哎。完了等于，哎，或者这样，咱们为了区分一下，我这不叫以叫一个这个number，诶给它来一个编号啊，这编号，那这是什么作用呢？我们来为每一个这个超链接都添加一个number属性，那我们来看它这是什么效果，这个for循环会执行五次对吧？第一次执行的时候I是零，那我就是把第一个超链接取出来，然后给它加一个number number属性，那属性值多少是零吧？那第二超链接呢，是不是一啊，第三个超链接是不是就是二啊，依此类推，那现在我每个超链接里边是不是都有一个number属性啊，这个值是不是就是我们这个A的一个所引啊，它的作用就相当于我在每个苹果上做了一个标记，那只不过我是在什么呀，在对象上做这么一个标记吧，标记完了怎么取啊，这次是谁呀，这次是不是就是我们那个对象啊，这次表number是不行了呀，对吧，我一保存咱们来看。

一刷新这一点。零最后一个四这个三这个二这个一是不就有了呀，哎就可以了啊，所以注意怎么玩的，就是把这个索引作为我这个对象的属性去保存就OK了啊好，那现在我们已经知道我点的是哪个苹果了，点的是不是苹果啊，我已经知道我点的是哪个超链接了吧？那现在我假设我点的是索引为零的超链接，我是不是应该就显示索引为零的图片啊？我点的是索引为一的超链接，是不是应该显示索引一唯一的图片啊？诶所以获取超链接的索引用什么呢？诶，并将其设置为我们这什么呀？Index，诶直接来什么呢？来一个这个index等于一个z.number我干嘛了？我是不是将这个z.number值赋值给我们全局变量index，诶，也就是我要修正我当前正在显示这个图片吧，诶那然后呢，然后呢，然后我这是要切换切换图片啊，诶切换图片这块切换。

这怎么切呀？诶是不是修改我们这个img list的，点一个style点一个left的呀，诶等于啥呀，等于啥呀，如果我想显示第一张就是什么呀，第二张第一张是什么呀？第一张是零吧，诶第一张是0PX，所以这块如果你显示0PX它干嘛呀，它这不动啊，诶如果你想显示第二张呢，是不是负520PX呀，诶520PX，我这一刷新这一点是不是变成它了呀，你要想显示第三张呢，是不是负1040PX呀，一保存一刷新是不是就第三章了呀？诶那这有什么规律啊？诶我们来说第一章，第一章索引为多少啊，索引为零，那我这个left呢？Left是不是等于零啊，咱们就这样写啊，第一张索引为零，Left等于零，那第二张呢？

第二张索引为多少？索引为1LIVE呢？负二零吧，哎，负二零第第三章第三章索引为二应该选什么呀？负的1040吧，看见规律了吗？哎，那这个第一张显示零，我们说零乘以负520是不是就等于零啊哎，第二张显示负5200乘以，呃，不是一乘以负520是不是负520啊？诶第三章显示10402乘以负520是不是就是负的1040啊，所以你发现什么了，正好是，所以乘以那个。

负二负负Y2吧，索引有没有啊，Index吧，哎，所以我们这只需要干嘛呀，来一个负五百二乘以什么呀，Index是不是行了呀，然后不要忘了加上一个呀，PX这是不是就OK了呀，一保存咱们再看刷新走走走走走这不就OK了呀，诶点哪个就切换到了哪个啊就切换到哪个好，那这块切换完了，但是我们先来看一个问题。我这点是不是永远是第一个呀，哎，点没跟着变，那怎么办呀，那我们说了，你点完了以后，你说这要那个点也跟着变呀，诶所以在这儿我来干嘛呢？来修改我们正在是不是选中的这个，哎呀，诶修改我们正在选中A，我先采用这么一种方式啊，来一个O一个A，然后中括号一个什么呢？一个这个index点一个，其实我就直接这就行了啊style点一个这个background color等于什么呢？等于一个black，你先看我这么写行不行。

试试是吧，一刷新走你行了是吧，走你走你走，你完了是不是都黑了呀，哎都黑了，为什么呀，你这一设置完了，是不是都点一个黑一个，点一个黑一个，你不仅应该把它变黑，还应该把别的干嘛呀，是不变红啊，哎变红所以这么写呢，它不行啊，不行，不能这么写，它怎么办呢？那现在我们来看啊，这变黑变红这事我们是不是每次都得干呀，每次都干，那这样我们不妨干嘛呢？定义出一个方法，诶专门来干这个事儿啊，我在这儿来干嘛呢？注意了，这个方法我们就在内部用，所以这个方法我就直接写到这个window.unload里边，如果你还需要再加用，你就写外边在这儿直接在这用了啊来干嘛呢？我们来创建一个这个方法，用来干嘛呢？用来设置我们这个选中的什么呢？A直接来一个方式叫一个set，一个A设置A啊设置A我来怎么写，看着for循。

还Y一个I等于零，然后I小于OA，点一个Les，我是不是对这个A进行变利啊，诶对这个A进行变利，然后来什么呢？OA中号A点一个style，点一个这个background color background color等于什么呢？等于一个red，我知道在干嘛。我是不是对所有的A进行便利，然后把它们背景颜色设置为红色呀，哎，红色，然后看这我掉一个这个set a，那这回我一点什么效果一刷新，现在一点走，你一点一点一点是不是全变红了呀？诶全变红了别着急，全变红了也不行啊，那还得干嘛呀，这咱们先写一下啊便利我们这个所有的A并什么呢？并将它们的这个背景颜色设置为红色啊设为红色，然后这儿呢，我还要干嘛呀，将我们这个选中的A设置为黑色，哪个是选中的呀，是不是就是我那个index那个呀，诶设置为这个黑色，直接来一个OA，然后这来什么呢？Index，点一个background。

啊对，点style啊，点style t点一个background color等于一个black，那这什么效果呀，我让其他的A都变红色，然后剩下那选中的是不是变成黑色呀，那这回再看一刷新，再一点走你走你走你走，你是不是跟着变了，那就跟着变了，但是看没看到问题啊。

看见了吗？我鼠标一上去那后是不是没了呀？诶为啥没了呀。我这是不是给他设置了一个内联样式啊，内联样式的优先级最高是不是比那后卫要高啊，所以这后卫样式是不是这还能出来，但是当我点了一次以后，是不是出不来了，哎，出不来了，那这块咋办呀？那连要是的U先级高怎么办呢？诶那我这样写，我不写right等于什么呢？等于一个空串行不行？背景颜色等于一个空串，等于是我把它那个内联样式背景颜色是不是给它去了呀，内联样式背景颜色去了，那我们说了，我样式表里边是不是有一个背景颜色是红色呀，那内联样式没了，是不是就样式表里边儿。生效了，诶那这样就干嘛了，是不是就不会覆盖了，诶不会覆盖了，这个再看啊，我们来看一刷新再一点。

是不是就没事了，哎，就可以去切换了，看懂了吗？哎，一定要注意啊，这块等于空串是干嘛，就是把这个back光的样式给它去了，去了以后是不是就是我们那个什么呀，默认样式吧，诶默认样式啊，这么一个效果啊好，这块整完了，这东西是不是非常简单呀？诶但是有一些细节地方非常多是吧？诶细节地方非常多，但是这东西切换是切换了，但是这玩意儿还不如咱们之前做那个是吧，费半天劲，结果还是这个效果，是不是没转起来呀？哎，所以我们需要是不是让它转起来呀，转起来我们就需要加一些什么呀，动画的效果，那这玩意儿简不简单。诶，咱们把咱们那个兔子是不是给它引入进来就行了，哎来引入我们这个工具，引入我们这个工具，咱们是不是只需要加咱们那个木函数是不是行了呀？来这里边来一个src兔子引入进来以后，咱们再看，那现在这个切换我还用不用这么切换了，不用了吧？诶我把它注了，来这块我写注释啊，这是设置我们这个选柱酶，诶选中酶那在这儿呢，我来一个叫什么呢？诶咱们使用什么呢？使用我们这个木函数来切换我们这什么呀？图片怎么切换，直接来一个目目参数给你列出来了，第一个是传一个object吧，要执行动画的对象是谁呀？是不是就是img list呀？第二个是我们要执行动画的这个属性谁呀？是不是life呀？第三一个是我们这个什么呀，Target是不是执行动画那目标啊，目。

在哪啊，是不是负的520乘以我们这个index呀，诶然后最后一个不是最后一个第第四个速度，速度先来一个十，最后一个是我们那什么呀，回调函数先写上不一定用啊，不一定用先写上一保存是不是就写完了呀？诶然后再一刷新走，你这回你再看。

是不是就有轮播的效果了，有点有点慢，咱们来一个21保存，再一刷新走你。是不是就OK了呀，哎，这个图片就给它切开了，但是你要从最后一张切换到第一张，稍微会有点有点长是吧？有点长啊，这是我们说的这么一个，这个效果咱们就给它做完了啊，就做完了点击我们这个切换图片啊好，那这个里边呢，都是咱们学过的知识，没有难点，稍微有一点难度，就是我们获取这个，所以这块你稍微看一下，然后还有我们设置这个A这块其他地方其实呢，都不难啊，其他地方都不难，这块功能就完成了，然后呢，这个功能完成了，还有一个什么呀，是不是自动切换呀，自动切换是不是跟这个。差不多了，哎，差不多了，今天晚上把这个斜斜，然后去想想这个自动轮播自动切换图片怎么来完成啊，怎么来完成来我们呢，先停一下。