引言
最近再做3D的大屏，然后客户发来1G的图片压缩包，让我全放上去当轮播图
这不得卡死啊，现成且现代化好用的第三方库没找到
于是又到了我最爱的实现源码环节，核心代码十多行即可
底部有源码
思路
- 压缩图片
- 轮播只需要两张，来回交换，用点障眼法就是无缝了
批量压缩
这个用canvas就能实现，于是我写了个HTML来批量压缩
canvas转存图片时，使用jpeg | webp的格式即可压缩，MDN上有
使用canvas.toBlob可以压缩更多空间，这个不是重点，提一嘴而已
虚拟无缝轮播实现
直接一张动图，清晰明了的解决问题
是不是看起来很简单，加载前两张图，当动画结束时，改变移动那张图的src，同时位移
再加个overflow: hidden不就行了吗
编码实现
HTML和CSS我就不贴了，这个没什么难度，容器固定大小，子元素排列一行
然后给包装的容器添加个transform即可
下面是用vue3写的，定义了一个imgIndexArr数组装当前要显示的索引
_data为计算属性，根据imgIndexArr自动变化，里面放的就是图片
我们只需要修改imgIndexArr即可实现数据切换
我们需要在动画完成时改变，即添加ontransitionend事件
当触发next方法，图片滚动停止后，就要执行onTransitionEnd了
定义俩变量，一个代表最左边的图，一个为右边的图
这里根据变量，决定谁会更新src，并且改变left值实现位移，不好描述啊
transform会一直向右位移，left值也是，所以他们会形成永动机
在HTML里写上他们位移的样式即可自动更新
Bug
至此，看着已完成，似乎没有任何问题
但是你把页面隐藏了过后，过一会图片全都不见了，我们打开控制台看看为什么
可以看到，left停止更新了，也就是说，onTransitionEnd没有执行
transitionend在你浏览器隐藏页面时，就会停止执行
这时需要在页面隐藏时，停止执行，执行如下代码即可
ts
/** 离开浏览器时 不会执行`transitionend` 所以要停止 */
function bindEvent() {
window.addEventListener('visibilitychange', () => {
document.hidden
? stop()
: play()
})
}这时一定有人会说，你这不能往左啊，没有控制组件啊
如果要往左的话，只需要把两张图轮流交换改成4张图即可
具体逻辑都是差不多的