这周做了一个看似很简单的需求（就是给页面新增图片这么简单.....）当时我很开心刷刷刷把新图链接加上去就提测了。
但是当需求处于测试阶段时发现事情没有那么简单！！由于需求项目较老，发现项目内的效果全都是用原生JS实现的。然后原本的图片缩略图组件居然不兼容切换图片时缩略图自动定位，所以又另外花了时间对原本的图片缩略图组件进行改良。
先来看一下最终要实现的效果：
整体思路：
关键变量
- 变量
currentIndex表示当前将切换图片的index - 数组变量
currentShowItem表示当前缩略图区域展示出来的图片index
大体思路
- 所有用户交互时都需要重新计算
currentIndex与currentShowItem - 所有用户交互时都需要判断
currentIndex是否存在于currentShowItem中：若不在，则需要将缩略图区域滚动到将要切换的图片位置；若存在，则无需滚动缩略图区域 - 计算缩略图要滚动的位置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。