说在前头
喜欢并学习前端，一路摸爬滚打过来，现在算算也快满一年的，每天或多或少都会来“拜读”大家的写的文章，学习与感悟了不少，作为一名要变的更强的前端小哥哥，在这个节点上，也想写点东西，算是完成自己的一个小目标，也是抛砖引玉吧，错误或者建议尽管砸过来，反正我头铁，嘻嘻。
前因后果 & 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”装载最后一张图
代码实现
这部分内容，想了解的小伙伴还是直接去看看吧，都是我自己写的，喜欢给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