记一个JavaScript图片轮播思路与代码

说在前头

      喜欢并学习前端，一路摸爬滚打过来，现在算算也快满一年的，每天或多或少都会来“拜读”大家的写的文章，学习与感悟了不少，作为一名要变的更强的前端小哥哥，在这个节点上，也想写点东西，算是完成自己的一个小目标，也是抛砖引玉吧，错误或者建议尽管砸过来，反正我头铁，嘿嘿。

前因后果 & Code Address

      前几天，项目需要，自己撸了一个JavaScript图片轮播，加之又看了不少不用Jquery，直接上JavaScript的文章，也就突发奇想，自己也写一个JavaScript而不依赖Jquery这样的前端用的图片轮播。
      恰好掘金上没找到类似文章，那么我来填这个空，JavaScript IE9 图片轮播传送门，链接地址是前几天同是掘金上，我发布分享的我自己的Github Demo地址，因为刚封装好这个图片轮播，迫不及待得想分享给大家，所以文章都没写就直接上了，现在想想，觉得还是有必要来写点东西的。

需求&结果

      美丽温柔大方的UI小姐姐给出的设计上是类似下图示的轮播，灰底白圆的部分是图片的索引栏位置，点数量与根据轮播图数量走的，白色部分都可以视为图片显示区域，而灰底部分实际也是透明的，只能看到白圆，为了避免图片也是白色衬底，白圆也是要加上灰色边框border的。

那么来看看实际实现后的效果

细心的你能够发现其中的功能点有以下

• 1.自动轮播滚动
• 2.支持拖动滚动
• 3.索引点击滚动
• 4.图片超链接跳转(这个看不到，但是我加上了)
• 5.切换效果(这个视为隐藏固定需求)

多思路探讨

思路原型1

      一般我看到的轮播图设计原型是将所有图片作线性排列，使用margin-left或position left等方法控制,通过改变整体或每个单体元素的偏移值(margin-left或left来实现滚动与切换)实现滚动，但偏移时，整体节点结构不会发生改变，如下图五彩图示，黑线框为用户眼睛实际能看到的地方，这么做，在初始状态就要生成所有元素色块，滚动时，改变 装载色块整体 的偏移量的方案比改变 每个色块 的偏移量的方案要更优，因为后者方案在色块较多时，js操作的对象更多，性能消耗会更高。

我的思路原型

      我使用3个色块来装载图片，类似左轮手枪，我这只有3个弹容，每次要看什么图片才会装载进去，初始时，位置“2”装载第一张图，位置“3”装载第二张图，位置“1”装载最后一张图

      偏移后，偏移方向的节点被打出，弹夹滚动，并加入新节点，见下图，此时位置“1”的内容装载的是位于位置“3”图片后的下一张图片，反向偏移则装载前一张图片，若图片用尽，则按图片滚动方向确定放入第一张图片开始或最后一张图片。

      而我作出以上个人轮播图设计原型的选择，是基于轮播图 可拖动的交互 无缝循环滚动的想法，按照 思路原型1，在首末位置滚动时，势必要回滚才能到达另一侧，当然，有改进方法也可以实现 思路原型1的 无缝循环滚动，但是需要对每个色块节点进行对象操作，色块越多，性能就越容易凉凉，但是，如果，轮播图不需要支持拖动，那么， 思路原型1是不错的实现方案。

代码实现

这部分内容，想了解的小伙伴还是直接去看看吧，都是我自己写的，喜欢给star噢，英语不好的同学，请使用Chrome右键翻译中文
JavaScript IE9 图片轮播传送门
代码上主要就是

• 1.初始化容器，滚动事件绑定(一定是委托事件监听!!!)，装载内容，启动定时滚动
• 2.拖动事件触发，暂定定时，拖动事件内方向判断，是否滚动判断
• 3.滚动时，操作2个js对象偏移量，加上css translation过渡，实现效果，随后删除已不可见的js对象，在另一侧新增js节点，判断图片当前索引是否需要从头或尾重新开始并装载图片,索引点切换、

突然抛几个问题

• 1.为啥要用委托事件
• 2.js定时5s就一定是间隔5秒吗

补充一点,索引点的CSS切换效果是完全基于CSS的translation width left实现的，也是从咱们大掘金某个小兄弟那里得的灵感-不可思议的纯CSS导航栏下划线跟随效果。

总结

      本JavaScript图片轮播
      先说缺点，兼容性一般，需要IE9 ，手机端应该没问题，但我还没测试过，而且，滚动时始终要不停操作轮播的节点对象，这点来讲，此类图片轮播的确是...，反正性能是肯定要有所牺牲的，再者，点击索引点切换时，不是相邻的图片快速切换(切换图中在点其他切换)会有缝，有时还很大，头疼，哎呀呀，反正大家开心就好，现阶段暂时不会去优化噢。
      优点...能用...还行...有那么点意思，行吧，先写到这。嘿嘿 :P