【仿穷游项目】无缝连续滚动特效

思路&＃xff1a;

1. 机理&＃xff1a;使用CSS3过渡&＃xff0c;不是JS动画
2. 比如 0 1 2 3 4 5&＃xff0c;六张幻灯片&＃xff0c;克隆第一张&＃xff0c;当运行最后一张时&＃xff0c;对结合transform的translateX进行处理
3. 用定时器实现&＃xff0c;去除首尾张幻灯片切换时的过渡效果&＃xff1b;
4. 同时还有注意防抖&＃xff1b;
5. translateX的时候&＃xff0c;为了适应不同屏幕大小的宽度&＃xff0c;需要结合id&＃xff0c;即第几张图片的索引&＃xff1b;比如&＃xff1a;“translateX(” &＃43; (-100 / 6) * idx &＃43; “%)”;&＃xff0c;6即有六张图片&＃xff0c;每张图片占16.66666666%的宽度&＃xff0c;因此每次移动的长度设置为百分比&＃xff1b;

问题&＃xff1a;

1. 当浏览器最小化的时候&＃xff0c;会发生什么&＃xff1f;

• 幻灯片快速移动
• 怎么解决&＃xff1f;
  • 监听窗口最小化&＃xff0c;然后定时器清除&＃xff1b;