js 轮播图

前言

 

时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上，我对本身以前三次失败的面试经历作了一次深度回顾。

可能不少小伙伴会问，为何要去回顾失败的面试经历呢？

由于在互联网+时代，成功的案例能够借鉴，可是不可复制；失败的案例能够引觉得戒，可是不可重蹈覆辙。你按照成功者的步骤一步一步走，最后不必定会成功；但若是你按照失败者的步骤一步一步走，结局注定会失败。

我在这里写出当年我失败的经历，算是对本身作一个总结，也是为了提醒后来者，一入前端深似海，坑多坑少本身踩，避免走上闰土哥的老路。

因此，接下来，正文从这开始～

 

壹

 

提及第一次失败的面试经历，是在我13年刚刚毕业的时候。那时我正在海投简历，认真找工做。当初应聘的是一家规模不算大的小公司，进去以后，面试官看都没看我一眼，给我丢下一句话就忙他的去了。

他原话的意思是说，让我用jQuery写个轮播图效果，给我提供的条件是，一台没有联网的笔记本电脑，和本地下载好的jQuery的API文档。

当时刚从培训班学出来的我，html和css基础还算扎实，但对jquery的api熟练程度仍是有所欠缺的。由于以前在培训班学习切静态页面的时候，碰到轮播图效果通常都会用网上别人写好的插件。但我仍是硬着头皮去尝试着写了写。

过了几分钟后，我静态页面的布局写出来了，可是jquery的轮播效果仍是没整出来。当时的我，知道经过的胜算几乎为零，但仍是尽力争取了一下，跟面试官说，我U盘里有我本身的做品，你要不要看一下。面试官此时仍是目不转睛的盯着他的笔记本屏幕，边看边说，你本身带来的做品，是否是本身写的也不必定，面试题最能说明问题等，听他巴拉巴拉说了一堆。

 

结果可想而知，我被面试官刷下来了。

 

回去以后，我便开始研究，如何用jquery去实现轮播图的效果。在这里，我简单地说下，当时不少购物网站（好比说淘宝京东）都会添加商品的图片轮播效果。轮播图做为一个公司首页最重要的推广方式，因为其相对于静态页面的动态滚动，使其更容易吸引客户的眼球。

如今想一想，轮播图的原理其实十分简单。它是利用人眼的视觉差，经过移动每张图片的left值，产生一种动态滚动的效果。废话很少讲，直接上代码：

 

 

记住，写任何JQ交互效果，都是先构建好布局，而后才开始JQ处理，DOM操做。

在这里，节点的构建其实没什么好讲的，CSS样式也很简单，这里就不贴出代码了。简单说下，每一个li下图片的显示与隐藏，都是经过它的display属性来设定。左右切换则是采用图片li浮动，父层元素ul的宽度为总图片宽度（也就是li 的宽度乘以li的个数），ui相对外层父元素绝对定位，并设定为超出的部分要隐藏。而后当想切换到某个index 的图片时，则采用修改ul的left值来实现。好比显示第一张图片初始定位left值为0，要想显示第二张图则将left值修改成-400px便可。

页面已经构建完毕，接下来就是JQ的操做。咱们直接贴出代码：

 

 

在这段代码中，咱们先是用变量存储了当前索引值和图片总数，而后定义了一个定时器seInterval函数，里面的逻辑是，若是当前index值小于图片总数减一，就让它自增++；若是大于的话，就让当前index值初始化为0。

而后为左右箭头添加了hover和click事件，在这里调用了两个函数，一个是重置定时器函数autoChangeAgain()，一个是图片切换处理函数changeTo()。当点击左右箭头或者是自动轮播的时候，咱们都会调用animate()函数，经过修改left 值产生动态滚动的效果。最后就是给li控制按钮（小圆点或者是小长条）绑定事件处理函数，当鼠标移入清除定时器，反之则启动定时器。

大概的原理即是如此，因此说，轮播图最简单也最困难，图要张张轮着播，还要丝滑无缝隙。自此，我才明白了，面试官为什么会让应聘者二话不说，先来写一个轮播图效果，由于麻雀虽小，五脏俱全，这里面涉及到了不少知识点，若是你能写出来，证实你对JQ的API的熟练程度仍是能够的，并且也有必定的逻辑性。起码从侧面反映出，你是一个合格的初级前端攻城狮。

 

贰

 

个人第二段失败的面试经历，提及来也挺巧，仍是跟JS轮播图有关。不过此次换成了用原生JavaScript来编写。照样，我仍是由于没有写出来而被pass掉了。后来想一想，其实，逻辑和JQ是同样的，只不过是换成了JS。仍是先直接贴出代码：

 

 

看看这JS的代码量，仍是有些冗杂，不过思路仍是模仿JQ的实现思路。换汤不换药，代码里备注已经很详细了，这里就不一一阐述了。

很显然，此次面试的难度已经提高了一个台阶，考察的是面试者对原生JS的熟练程度，以及逻辑性。相对的，此次的面试岗位的薪水也是相对要高点。若是这个能写出来的话，我以为你的JS正在进阶，而你也正在进阶为一个专业的JSer。此时，距离中级前端攻城狮就不远了。

 

叁

 

俗话说，无巧不成书。关于我第三次面试失败的经历，依然是与JS轮播图有关。不过此次面试，却给我留下了一个比较深入的印象。

 

 

这是我去年的一次面试，给我发面试邀请的公司是思特奇（这也算是在电信行业名声在外的互联网大厂了，若是有不了解的能够上百度百科）。思特奇在太原高新区的办公地点能够说是很高大上，整整一层都是技术开发人员，一排排A面亮着银色苹果logo的MacBook Pro甚是晃眼，给人一种浓厚的程序猿文化。

此次的机试题，仍是那个绕不过去的JS轮播图的实现，不过此次倒是让我用面向对象的思想去实现，听说这是技术总监临时的想法，这也是我后来才知晓的。固然了，我此次面试的薪水又拔高了一个台阶。

基于面向对象的轮播图，看似比面向过程要繁琐了不少，并且对于一个轮播图来讲，也不必。但面试官想要考察的是应聘者对于面向对象编程的熟练程度，看看你的前端编程能力是否达到了他们公司业务开发的水平。

很显然，此次的机试题打了我个措手不及。

正如后来我拜读的JS红皮书里第六章写的，面向对象的程序设计，首先要建立一个Object实例，定义一个Slider构造器。而后在Slider的prototype原型上定义各类方法，这样作的好处是能够很方便的实现轮播图的效果，减小代码的冗余，同时避免了变量命名的冲突问题。

如今须要咱们先来捋一下思路，分析一下构造器里须要的属性：

1. 初始化全部的样式操做

2. 显示在对应的容器操做

3. 鼠标进入事件

4. 自动播放事件

在这些基本的事件中，咱们须要注意调用的顺序，如建立在初始化以前，咱们能够把一些通用的属性放到原型链中来编写，这样的好处是减小了变量空间的占用和屡次访问属性的结果。

过程当中遇到的问题：

1.其中的this指代问题：这里的解决办法是在鼠标进入以前的函数中缓存一下var that = this。 这样就能够访问属性了。

2.图片轮播判断：向左点击的时候， 若是当前的索引值大于零，让它执行自减操做，若是不大于0 就让他等于对应图片长度-1；

                       向右点击的时候，当前的索引值小于它对应的轮播图片的长度-1，执行自加1操做，超过图片轮播长度时，索引值等于0。

 

此次基于对象的代码就不给你们贴出来了，留给大家作个实践。固然，此次思特奇面试之旅，最后也是以失败了结，这也是我离进大厂最近的一次。

 

后记

 

分享了这么多面试经历，其实，我最想跟你们分享的是，不管你想走多远，你都须要不断的走下去。前端最精华的部分即是原生的JS，也只有JS是前端开发中算得上编程的一门语言，这也是咱们前端工程师技术分层的重要指标，也能体现出你的代码能力，开发水平。因此，不是说你会多少个gulp、grunt、webpack这样的构建打包工具，会多少个angular、react、vue等框架的脚手架搭建，会多少个sass less stylus等这样的css预处理器，会多少个npm bower cnpm等这样的包管理器你就牛逼，永远记住，JavaScript才是咱们前端工程师的核心竞争力！

 

但愿这片文章的推送，能直抵你的心里。

 

 

声明

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