引言

最近再做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在你浏览器隐藏页面时，就会停止执行

这时需要在页面隐藏时，停止执行，执行如下代码即可

/** 离开浏览器时 不会执行`transitionend` 所以要停止 */
function bindEvent() {
window.addEventListener('visibilitychange', () => {
document.hidden

            ? stop()

            : play()

    })

}

这时一定有人会说，你这不能往左啊，没有控制组件啊

如果要往左的话，只需要把两张图轮流交换改成4张图即可

具体逻辑都是差不多的

源码: gitee.com/cjl2385/dig…