52.尚硅谷_jQuery_应用_切换显示中图.avi原创

我们看一下我们第十个。写，一不留神，咱也写了不少代码。那第十个功能呢，啊，给大家演示一下啊，这样一个功能。就当我的鼠标啊，在这个小图片上面移动的时候。能看到吧，OK，那个看有什么变化，首先是我放上去，它是不是有一个红色的一个背景的一个框啊，这个能做吗？是不是就样式啊，啊加一个样式，同时上面的那个那个大一点的图片是不是增加一个大一点的图片，其实它中型图片为什么是中型图片呢？因为右边还有什么是大图啊，相当于这个小图最中间的是什么。中途是吧，呃，右边的是什么大图，大图是不是只能看到一部分呢？

那现在呢，我们再去移动的时候有两个变化。一个是我当前的这个图片呢，会加一个啊样式的背景框，红色的，接着上面是不是显示我这个小图片所对应的什么，中途对不对，好来看懂了以后，下面我们就要去看一下它会操作的是到底是哪些。啊，严肃。好看啊，首先呢，我们这个地方啊，我们的四件加在哪了。是吧，I上面行不行，我加一麦上面行不行。行不行，而且你没发现那个加在一上面和加在L上面有没有区别呢。有点小区别，因为主要是什么，那个ii它的宽度是六十五六十二是吧，呃，那个image的宽度是多少是吧，50。

是吧，还是有一点小区别的吧，啊，也就是说我那个事件响应的那个范围是不太一样，对吧，用ii可以吧，其实用一麦也没什么太大问题。啊，没有什么太大的问题，好，下面样式看了，我们说我们刚才这个样式是通过什么方式加上去的。是不是给image标签加一个class，它就有了那个红色的背景框，有没有看到？来吧。好，那除了改变这个class，还要改变什么呢？应该还有一个图片的改变吧，图片在哪啊，我的天看一下啊。嗯，这一个图片在哪呢？图片ii，嗯，这一片接着是应该在这个里面。

啊，我把它弄宽一点啊。大家看到有个这个图片看到吗。这里面有个M。M，什么意思啦？中途啊，OK，你的意思对啊，这个里面。S什么small小姑？呃，看看这里面有有S3，嗯，诶这个边吗？啊，这个是固定的是吧？看这里这是什么S2是不是不同图片，而大家看到这里面有个规律啊，这个上面啊这两张图片一。大家看呢，他们俩之间什么关系啊，有没有一定的关系？有，就是多了一个杠，M看到了吗？这个关系必须找清楚。

因为我再去切换这个我的这个图片的时候，他是不是要去更新那个中途啊。那我得知道中途的路径吧，那个中途路径根据谁来去产生呢？小图。那么懂？啊要能理解啊好，那整个啊过程呢，就跟大家已经说的差不多了，那下面我们的工作呢，就是要去。啊做了，其实这个不难啊，这个一点都不难。这个难度不大。新建一个。这个跟刚才比那简单了很多了。文件新建来一个。

啊，就这个吧，好，首先我们知道所有的世界加在哪些元素上面。加什么是ii呀。哎，刚才我们是不是找过，那我们这一次可以根据ul去找过，可不可以，是不是直接找到它呀，好，下面的说加什么监听。还是一样是whole，其实在做项目的时候，后鉴定是比较多的，就一路一出变化嘛，是吧。好，没问题。那下面我要去操作哪些元素呢。首先我要操作里面的什么。是不是image对不对，我要去操作上面的这个什么image对不对，好，那这个地方我要去操作它的什么数据啊。

要不要读他的SC，要要读这个要设置这个SC吧，这里面就要知道他们之间的什么。关系。啊，有了它，那我们就可以去写了啊，就可以去写。那行吧，来做啊。把它收缩一压。我们来写，首先我们来先看一下这个地方我们怎么写。那我就来一个呃，方向第一方取名什么名字，关键是。啊，没有啊，这里面根本就没有的操作是啊是什么image什么。这边。可以吧，就这样吧，好吧，嗯。

有人说老师你能不能写的更好一点？你不要光对我提要求，你也对你自己提下要求啊，来看一下啊。啊。找到那个我们那个元素是吧，这个好找吧，ID接着找它下面的什么III。井号icon list下面什么，所以ii加什么力over是吧？是吧，在一路的时候，我当前这一个ii的。他要加一个什么。应该是要加class吧，那个class的值叫什么来着？来看一下，移到这里。How symbol。

看一下啊。不是this，他是不是this，是this吗？是不是不是因为现在我的认识是不是ii呀，然后我要找到它里面什么是不是image。咋办啊？我能用，原先能行吗？我能不能先准。还记得不，秋水，它得到的是所有的标签子元素，但是它是个尾数组。零接着再来一个什么class name等于我的天呐啊，Symbol。看是不是啊，再检查一下。诶，记忆能力还不错是吧。

各位可以，这是用原纯原生的是不是，那我们不用原生的，我们该怎么做呢？上来包一下。是不是接着来个什么children？是吧？还需要写什么？其实可以完全不要，因为他就一个孩子。是吧，那下面干嘛。点A啊，或者是class，或者是爱的class可不以，因为它就一个class。对吧，写什么。写这个。哪个写起来舒服啊，肯定下面的写才舒服。但你说上面的行不行，斜一样而已。啊，我希望两者大家都要会啊好，那下面这个是不是比反的操作他干嘛。

是这的。我一移出，是不是也把它移除。啊，那除了去做也就这么做完了吗？没有，我们同时还要去操作这个什么，是不是这个中途，这个中途在什么时候才要去操作，是在。或是在去进入之，进入的时候还是离开的时候，进入的时候是不是才要去显示，能懂吧，进入的时候才需要显示，好了来看看怎么做，这是显示对应的中途啊，显示对应的什么中途，那对应的话，那我是不是要求到它所对应的那个src。对应的SC对不对？要想得到对应的SC，我是不是先得到当前的SC？这个吗？是这个吗？不是这个Z是谁I，所以吧，先还是想办法。

先得到谁了？先得到image再说。是不是？啊，不然的话你要搞几遍啊。是不是接着啊，我要去通过它去取它的src属性值吧。是不是src属性是怎么的？A drr写什么src对吧？好，拿到它以后关键是这个行吗？不行，它是个小图片，我要把它变成半中图片的地址吧，中途是不是在点JBG的前面加上一个什么。干嘛杠M那怎么加呀。嗯。是吧，怎么办啊？

啊，是不是用正个说白了，其实我们可以用，看到这里啊，用是不用那个replace都行，Replace replace什么呢，大家看到啊，其实就是什么点JPG变成什么。杠m.JPG因为我们都是点JPG的图片啊，这个图片都不会搞编辑图片就搞JD，就简单做一下吧，好，这一个是不是中途的图片的地址。下面做什么事情？是不是给它设置进去，甚至我现在是不是找到根据ID找到它，这是一个medium image。来找到那个井号medium and a怎么写的呀？ED。

这个吧，干嘛。Yeah。AR呗，是不是这是什么src值是什么src。没问题吧，挺简单的一个是。好，现在我们就来去看一下呗，说啊。好。可不可以？可以吧，So easy啊没有问题，这个嗯，那。都可以。就这么简单。这个其实比上一个要简单很多的，上一个还是有点小难度的啊。好，这样我们就把我们的第十个功能完成了，就剩最后一个了。啊，万里长征，就差这一角。

哎呀，不容易呀。来，我把这个呢提交一下。啊，这个。好，可以。把这个保存。