在这里，我先解释下：

第一步，通过filter方法筛选出className为current的li，获得它的index，然后赋值给变量currentNum；

第二步，在浏览器刷新时初始化滑动条sliderBar的位置到指定的栏目上；

第三步，利用hover方法监控鼠标移入移出的效果，从而改变sliderBar的left的值，达到滑动的动画效果。其中，stop()方法是为了解决动画队列的问题。

以上就是我debug的过程，虽然浪费了一些时间，但是好歹问题解决了。如果你要问我，你哪来那么大的勇气，去死磕这个效果(bug)？我会告诉你，如果搁以前，我可能会在网上找个插件了事，因为在谈到javascript业务逻辑开发这块，我承认还是有不小的差距。

但是，今年我开始认真的研究了红皮书，也就是《JavaScript高级程序设计》这本被奉为经典的JS书籍。在经过不断的拜读和敲代码，现在我对自己的原生JS这块逐渐有了些许自信，明白了它的一些底层原理和概念设计。以前是只会照葫芦画瓢，现在也有了点知其然，更知其所以然的味道。

正是通过对基础的夯实，我才有了莫名的勇气去死磕这些开发中遇到的各种疑难杂症。

感谢老铁们不厌其烦的看我debug思维重现到这里，其实，闰土也是想借着这个事儿想跟大家说，前端基础真的很重要，尤其是JS！如果你基础不牢靠，一味的追逐热门框架，看似解决了工作上的一些问题。但回头想想，你的这种技术逻辑还没有形成自己的知识体系，它是松散的，是畸形的，是根基不牢靠的。学好基础再去学框架，会事半功倍，游刃有余。如果基础没打好，不注重底层原理，你的前端路注定走不远。

因为解决一个bug，浪费了一些时间，看似得不偿失，但是搞出来就算牛逼。最起码等你以后当老大了，别人问你，你就知道怎么解决，自己踩过的坑，印象最深。而不是说，以前有人帮我解决过，现在忘了。

所以说，实践是检验真理的唯一标准。网上很多文章写的有好有坏，自己去动手debug或者是实践一下，得出自己的结论才是靠谱的。

后记

凌晨1点，夜已深，估计大家看到这篇文章的推送，已是明早上班赶路时。临睡之前，闰土送大家一句话：别人也没有多牛逼，你也可以在你的领域，开辟天地。

声明

欢迎转载，请注明出处和作者，同时保留声明。

作者：闰土少年

出处：

本博客的文章如无特殊说明，均为原创，转载请注明出处。如未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

想了解我的更多动态？欢迎关注我的微信公众号：