当前位置: 首页 > Web前端 > HTML

JavaScript实现图片缩略图自动滚动的思路很简单

时间:2023-03-28 15:12:11 HTML

这周做了一个看似简单的需求(就是在页面中添加图片那么简单。。。)当时很高兴的添加了把新图片的链接上去测试一下。但是当需求到了测试阶段,才发现事情并没有那么简单!!由于需求项目比较老,发现项目中所有的效果都是用原生JS实现的。然后原图缩略图组件不兼容切换图片时缩略图的自动定位,所以又花时间改进原图缩略图组件。看一下最终效果:总体思路:key变量变量currentIndex表示将要切换的当前图片的索引数组变量currentShowItem所有用户交互都需要判断currentShowItem中是否存在currentIndex:如果不存在则缩略图区域需要滚动到要切换图片的位置;如果存在,则不需要滚动缩略图区域来计算滚动缩略图的位置