Tab选项卡切换效果-自动切换

上节我们讲到了tab选项卡的手动切换效果和手动延迟切换效果，在延迟切换效果中，我们使用到了setTimeout函数，这节我们要实现手动自动选项卡的效果。

HTML结构和css代码都跟上节课一样，不知道或忘了的童鞋可以先去看看上节的内容。

现在我们先来实现纯自动切换的效果。这里要使用到setInterval函数。

接下来是先把要切换的标题和内容选择出来，在tab函数中，我们还新建了一个index变量，用以保存索引值。

接下来设置setInterval函数，在函数里每2秒执行一次。

接下来设置索引值，每2秒自增1，当到最后一个索引时，让其归零。

然后我们就可以循环先清除所有高亮的标题和显示的内容了，最后只显示索引的标题和内容。

结果：

以上就实现的自动切换的功能；接下来，我们加入手动切换功能，即给每一个标题绑定一个鼠标滑过事件，并且当鼠标滑过执行时，在里面清除掉定时器。

以上，当鼠标滑入时，定时器就清除了，但是当鼠标滑出时，就不动了，我们要的效果是当鼠标滑入时，停止自动；当鼠标滑出时，又能自动切换了。所以我们再给每个标题添加鼠标滑出事件。

这里出现了两个问题；第一，当自动切换时，效果正常，当鼠标滑入然后离开时，自动切换没有切换到我们鼠标滑入时的下一个标题，而是按照之前自动切换时的下一个标题来切换。第二，重复的代码过多，可以利用函数封装重复的代码。

我们先解决第二个问题，把重复的代码封装起来。

这样代码就简洁很多了。

接下来我们解决刚提到的第一个问题，就是当鼠标离开时，我们要让下一个切换按照鼠标滑入的标题的下一个索引来切换，而不是按自动切换时的下一个索引切换。

在以下这段控制自动切换的代码中，

当鼠标滑入时，id的值与index的值不一致，导致了autoPlay函数中的index++得出了不一样的索引结果。据此我们可知，只要在changeOption函数最后，让传入的当前索引（curIndex）都赋值给index，那么在下一次index++时，不管是手动还是自动，都是会自动切换到当前的下一个标题了

所以我们在代码中加入最后这句即可：

这样就全部完成了，最后把整个代码亮出来：

这期的tab手动与自动切换的效果就全部完成了，希望各位多多练手，熟能生巧。

敬请大家期待下一期的内容吧。