普通轮播和无缝轮播 2020-08-10 本文已影响0人 凉城十月 普通轮播 原理:将图片当作一个横向的整体,根据translateX的变化,实现左右移动。 重构前 重构后 无缝轮播 原理:将图片设为三种状态:enter、current、leave,先将第一张图片设为current,其他设为enter,动画开始后将current转成leave状态,同时将后面一张图片从enter切换到current,这个状态完成后,将leave状态的再立马切换到enter状态去等待入场。后面的动画原理相同。 无缝轮播代码.png 优化前 优化后