js设置按钮只能点击一次

那这个界界面已经完成了，那咱们来完成一下这个功能，那功能呢？其实咱们主要做两个功能啊。两功能？第一个什么功能啊？我一点这个小点的时候可以切换 图片啊，哎。切换图片，所以第一个功能我们要做的是什么呢？我在这来写一下，叫什么呢？叫做点击我们这个长链接， 要切换到我们这个指定的这个图片啊，点击超链接，切换我们到指定图片。那么说怎么切换的呀？点击第一个超链接， 点击第一个超链接，显示什么呢？显示第一个图片，点击这个，哎，第哎，二个超链接，是不是显示第二个图片啊？我就不再多写了啊，这都是废话了啊。第二个图片，那点击第三个显示第三个，点击第四个图片， 显示显示第四个呀，哎，显示第四个啊，这么一个东西，那这事其实我们都熟了，我应该先干嘛呀？ 点击超链接，那我是不是要给给超链接绑定单机响函数啊？哎，绑定单机响函数，所以这里边我们来为什么呢？为所有的这个超链接都绑定我们这个单机响应函数。直接来一个 for 去弯先便利 y 一个 i 等于 零，然后，哎小于我们这个 oa 点一个愣死，然后来一个，哎，加加变力啊，然后这个 oa， 然后来什么呢？ i 点一个 on 和立可等于一个 function function 呢？直接来一个额尔他一个这个 hello 保存，咱们来看效果。现在我一点 走，你是不是 hello 啊？这一走你是不是也 hello 啊？哎，点谁是不是都是 hello 啊？哎，这一块就 ok 了啊。单击响应函数绑定完了，那接下来呢？ 接下来要干嘛呀？是吧？切换图片了，点击第一个长链接显示第一个图片，点击第二长链接显示第二个图片。那问题来了，我点的是第几个长链接啊？ 首先我说我点的是哪个超链接，我知不知道？知道这次是不是就是啊？这次就是啊，我一刷新走你是这个呀，再点是不是就是他，但是注意我们知道是谁不重要。我得知道什么呀？ 我得知道他是第几个吧，哎，我得知道是第几个，所以第一件事我需要干嘛呢？我需要，哎，知道我们这个，哎，叫什么呢？叫做获取我们点击超链 接的什么呢？超链接的锁引啊，我要获取我点击的那个超链接的锁引。那怎么获取？哎，我这个乐特，哎，行不行，行不行？ 可以是吧，这问题咱们以前演示过，哎，这是一个单机响应函数，外边是一个负，我循环，他们的执行次序是什么？ 先执行负额循环，然后执行单击函数吧，也就是说当我单击想函数执行的时候， fux 循环人家早就执行完了吧。那复合都执行完了， i 是几啊？ 哎，是哎，是五吧，哎，我最大长度应该是五，所以你就会发，发现什么呢？你点每一个是都是五啊，所以你，哎能获取到吗？获 九哥，哎，注意啊，一定注意。他们执行次序是先干嘛呀？先执行负卧循环，再执行什么呀？单机响应 函数啊，咱就讲函数，这就像什么呀？这就像我这块，可能我是一个假设，我是一个卖苹果的，卖苹果呢，我家有一个大筐苹果，然后呢，我要干嘛呀？把这些苹果装到小筐里边去 去卖，哎，可能有一堆苹果是吧？一堆苹果，然后往里装，我说我这数，哎，从大框往小框里数啊，你应该能想这个镜头是吧？我这数一个、两个、三个、四个、五个、六个、七个、八个。假设我装了八个苹果，那现在我从这个框里我随便拿出一个苹果来， 那我问你这是第几个知道吗？不知道吧？你装的时候你数的，你取出来的时候是不是就没数了？哎，你不知道你拿的是第几个， 那怎么办呀？那怎么办呀？咱们先把苹果这问题解决了，这是不是一个意思呀？你现在是一个一个绑定的单机显函是不？绑定完了，你是不是不知道他是第几个了？那现在就需要知道怎么办呀？ 哎，那我这么想呗，我这有苹果，我拿出一个，第一个苹果我咬一口放里边，第二个苹果咬两口放里边，第三个苹果咬三口放里边，第八个苹果咬八口就是变成糊了是吧？变成糊了，然后来人买苹果了是吧？说我要第八个苹果， 他把壶拿准了，这第八个。甭管说这个招高不高，但是至少我们是不是可以知道我们这个是第几个苹果了？哎，第几个苹果了，那其实你不一定可以咬是吧？可以干嘛呀？拿个笔写上是吧？或者贴个标签，什么都行啊。哎，贴个标签，那同样我能给苹果贴标签， 我能不能给我这个超链接贴标签呢？哎，但这是为我们这个超链接来绑定单击响应函数，那我能不能给他贴个标签呢？那我是不是希望我们的这个每一个超链接都能去保存他自己的那个锁引啊， 哎，那我想想，那我现在这个哦，这个 a， 然后一个，哎，这个代表的是谁？是不是代表的我每个长按键啊？然后来什么呢？点一个这个 index， 点一个 index 什么意思？我是不是给他添加一个 index 属性啊？来什么呢？来等于哎， 完了等于哎，或者这样咱们为了区分一下，我这不叫一代，叫一个这个 number， 哎，给他来一个编号啊的编号，那这是什么作用呢？我们来为每一个这个超链接都添加一个 number 属性，那我们来看看这是什么效果？这个 for 循环会执行五次，对吧？第一次执行的时候 i 是零，那我就是把第一个长链接取出来，然后给它加一个 number number 属性，那属性值多少？是零吧？那第二条链接呢？ 是不是一啊？第三个长链接是不是就是二啊？以此类推，那现在我每个长链接里边是不是都有一个 number 属性啊？这个值是不是就是我们这个 a 的一个？所以啊，它的作用就相当于我在每个苹果上做了一个标记。那只不过我是在什么呀？在对象上做这么一个 标记吧，标记完了怎么取啊？这次是谁啊？这次是不是就我们那个对象啊？这次点 number 是不行了呀，对吧？我一保存，咱们来看一刷新，这一点 零，最后一个四，这个三，这个二，这个一，估计有了，哎，就可以了啊，所以注意怎么玩的，就是把这个索引作为我们这个对象的属性去保存就 ok 了啊。好， 那现在我们已经知道我点的是哪个苹果了，点的是不是苹果啊？我已经知道我点的是哪个超链接了吧？那现在我假设我点的是所以为零的超链接，我是不是应该就显示 锁引为零的图片啊？我点的是锁引唯一的长链接，是不是应该显示锁引一唯一的图片啊？哎，所以获取长链接的锁引并什么呢？哎。并将其设置为我们这什么呀？ index， 哎，直接来什么呢？来一个这个 index 等于一个 this 点 number， 我干嘛了？我是不是将这个 this 点 number 值复值给我们全局变量 index 啊？哎，你说我要修正，我当前 正在显示这个图片吧，哎。那然后呢？然后呢？然后我这是要切换切换图片啊，哎。切换图片，那这块切换图片怎么切啊？哎。是不是修改我们这个 i m g list， 点一个 style， 点一个 left 呀，哎，等于啥呀？ 等于啥呀？如果我想显示第一张就是什么呀？第二张，第一张是什么呀？第一张是 零吧，哎。第一张是零 px， 所以这块如果你显示零 px， 他干嘛呀？他是不动啊，哎。如果你想显示第二张呢？ 是负五二零 px 呀，哎，五二零 px， 我这一刷新这一点是不变成他了呀。你要想显示第三张呢，是负幺零四零 px 呀，易保存易刷新 第三张了呀，哎，那这有什么规律啊？哎，我们来说第一张第一张锁引为多少？锁引为零，那我这个 left 呢？ left 是不等于零啊？咱们就这样写啊，第一张锁引为零， left 等于零，那第二张呢？ 第二张所以为多少？所以为 e left 呢？负二零吧，哎。负二零。第第三张 第三张所以为二，应该选什么呀？负的幺零四零吧，看见规律了吗？ 哎。那这个第一张显示零，我们说零乘以负五二零，是不是就等于零啊？哎。第二张显示负五二零零乘以 不是一乘以负二零，是不是负二零啊？哎。第三张显示一零四零二乘以负五二零，是不是就是负的一零四零啊？所以你发现什么了？正好是，所以乘以那个 负二负负外二吧，所以你有没有啊？ index 吧。哎，所以我们这只需要干嘛呀？来一个负五百二乘以什么呀？ index 就行了呀，然后不要忘了加上一个 ps， 这就 ok 了呀，一保存咱们再看刷新。走走走走走，这不就 ok 了呀。哎，点哪个就切换到了哪个啊，就切换到哪个了。好，那这块切换完了，但是我们先来看一个问题， 我这点是永远是第一个呀，哎，点没跟这变，那怎么办呀？那我们说了，你 点完了以后，你说这条那个点也跟着变呀，哎，所以在这我来干嘛呢？来修改我们正在 是选中的这个 a 呀，哎，修改我们正在选中的 a， 我们先采用这么一种方式啊，来一个 o， 一个 a， 然后中科二。一个什么呢？一个这个 index， 点一个，其实我就直接这次就行了啊， style 点一个这个 background color 等于什么呢？等于一个 black， 你先看我这么写行不行， 试试是吧，一刷新走你行了是吧？走你走你走。你完了， 是不是都黑了呀？哎，都黑了，为什么呀？你这一设置完了是不是都点一个黑一个，点一个黑一个，你不仅应该把它变黑，还应该把别的干嘛呀，是不是变红啊？哎，变红，所以这么写呢？ 不行啊不行，不能这么写。那怎么办呢？那现在我们来看啊，这变黑变红这事，我们是不是每次都得干呀？每次都得干，那这样我们不妨干嘛呢？定义出一个 方法，哎，专门来干这个事啊，我在这来干嘛呢？注意了，这个方法我们就在内部用，所以这个方法就直接写到这个 windows 里边，如果你还需要在家用，你就写外边，在这，你直接在这用啊，来干嘛呢？我们来 创建一个这个方法用来干嘛呢？用来设置我们这个选中的什么呢？ a， 直接来一个方。什么叫一个 set 一个 a， 设置 a 啊？设置 a， 我来怎么写？看着 for 循环 y 一个 a 等于零，然后 a 小于 o a 点一个 lins， 我是不是对这个 a 进行便利啊？哎，对这个 a 进行便利，然后来什么呢？ o a 中号 a， 点一个 style， 点一个这个 background 的 color， background 的 color 等于什么呢？等于一个 red， 我知道在干嘛， 我是不是对所有的 a 进行便利，然后把他们背景颜色设置为红色呀？哎，红色，然后看这我掉一个这个赛特 a， 那这回我一点什么效果？ 已刷新，现在一点走，你一点一点一点，是不全变红了呀？哎，全变红了，别着急，全变红了也不行啊，那还得干嘛呀？这咱们先写一下啊，便利我们这个 所有的 a， 并什么呢？并将他们的这个背景颜色设置为红色啊，设置为红色，然后这呢我还要干嘛呀？将我们这个 选中的 a 设置为黑色。哪个是选中的呀？是不是就是我那个 index 那个呀？哎，设置为这个黑色，直接来一个 o a， 然后这来什么呢？ index 点儿一个 by 一个 ground 啊，对，点 style 啊，点 style s， t， y， l， e 点一个 background color 等于个 black， 那这什么效果呀？我让其他的 a 都变红色，然后剩下的选中的是变成黑色呀。那这回再看一刷新，再一点投，你 走你走你走，你是不跟着变了？哎，就跟着变了，但是看没看到问题啊， 看见了吗？我鼠标一上的那 hover 是不是没了呀？哎，为啥没了呀？我这是不是给他设置一个内 连样式啊？内连样式的优先级最高是不是比内后位要高啊？所以这后位样式是不是这还能出来？但是当我点了一次以后，是不是出不来了，哎，出不来了，那这一块咋办呀？内连样式的优先级高怎么办呢？ 哎，那我这样写，我不写 red 等于什么呢？等于一个空串行不行？ 背景颜色等于个空串，等于是我把他那个内连样式背景颜色是不给他去了呀。内连样式背景颜色去了，那么说了，我样式表里边是不是有一个背景颜色的红色呀？那内连样式没了，是不是就样式表里边 生效啊？哎，那这样就干嘛了？是不是就不会覆盖了？哎，不会覆盖了，这个再看啊，我们来看一刷新，再一点是不就没事了？哎，就可以去切换了，看懂了吗？ 哎，一定要注意啊，这块等于空串是干嘛？就是把这个 back 管的样式给他去了，去了以后是不是就是我们那个什么呀，默认样式吧，哎，默认样式啊，这么一个效果啊，好，这块整完了，这东西是不是非常简单呀？哎， 但是有一些细节地方非常多，是吧？哎，细节地方非常多，但是这东西切换是切换，但是这玩意还不如咱们之前做那个，是吧？费半天劲，结果还是这个效果， 是没转起来啊，哎，所以我们需要让他转起来啊，转起来我们就需要加一些什么呀？动画的效果，那这玩意简不简单呀？ 哎，咱们把咱们那个 toos 是不是给它引入进来就行啊？哎，来引入我们这个工具，引入我们这个工具，咱们是不是只需要加咱们那个木函数，是不是行了呀？ 来这里边来一个 src 兔子，引入进来以后咱们再看。那现在这个切换我还用不用这么切换了？不用了吧，哎，我把它注了来 这块写出。是啊，这是设置我们这个选中的 a， 选中的 a， 那在这呢，我来一个，叫什么呢？哎，咱们使用什么呢？使用我们这个木偶函数来切换我们这什么呀？图片怎么切换？直接来一个 木木参数给列出来了。第一个是传一个 object 吧，要执行动画的对象是谁啊？ 是不是就是 i m g 例子呀？第二个是我们要执行动画的这个属性，谁呀？是不是 life 的呀？第三一个是我们这个什么呀？他给的是不是一执行动画的目标啊？目标是哪啊？是不是负的五二零乘 以我们这个 index 呀？哎。然后最后一个不是最后一个，第第四个速度，速度，先来一个十，最后一个是我们这什么呀？回掉函数先写上。不一定用啊，不一定用，先写上一保存是不就写完了呀，哎。然后再一刷新，走你。这回你再看 是不是就有轮播的效果了，有点，有点慢，咱们来一个二十，已保存，在已刷新，走，你 是不是就 ok 了呀？哎，这个图片就给他切换了，但是你要从最后一张切换到第一张，稍微会有点 有点长，是吧？有点长啊，这是我们的这么一个，这个效果，咱们就给他做完了，哎，就做完了，点击我们这个切换图片啊，好，那这个里边呢都是咱们学过的知识，没有难点，稍微有一点 难度就是我们获取这个，所以这块你稍微看一下，然后还有我们设置这个 a， 这块其他地方其实呢都不难啊，其他地方都不难，这块功能就完成了。然后呢这个功能完成了，还有一个什么呀？是不是自动切换呀？自动切换是不跟这个 差不多了？哎，差不多了，今天晚上把这个斜斜，然后去想想这个自动轮播自动切换图片怎么来完成啊？怎么来完成？来，我们呢先停一下。