JavaScript|简单实现图片缩略图自动滚动

这周做了一个看似很简单的需求（就是给页面新增图片这么简单.....）当时我很开心刷刷刷把新图链接加上去就提测了。
但是当需求处于测试阶段时发现事情没有那么简单！！由于需求项目较老，发现项目内的效果全都是用原生JS实现的。然后原本的图片缩略图组件居然不兼容切换图片时缩略图自动定位，所以又另外花了时间对原本的图片缩略图组件进行改良。

先来看一下最终要实现的效果：

整体思路：

关键变量

• 变量currentIndex表示当前将切换图片的index
• 数组变量currentShowItem表示当前缩略图区域展示出来的图片index

大体思路

• 所有用户交互时都需要重新计算currentIndex与currentShowItem
• 所有用户交互时都需要判断currentIndex是否存在于currentShowItem中：若不在，则需要将缩略图区域滚动到将要切换的图片位置；若存在，则无需滚动缩略图区域
• 计算缩略图要滚动的位置

以下是逐渐完善组件的过程

（待完善）