JavaScript无缝图片滚动效果

无缝图片向上滚动的 JS 实现，真的是个挺实用的小效果，适合做信息展示、品牌宣传之类的场景。比如你有一组轮播图，或者客户的 LOGO 墙，想让它自动滚起来，看起来更高级？这段代码就能轻松搞定。

核心思路其实简单：用JavaScript拿到所有图片，通过CSS transform的translateY不断移动它们的位置。滚完一轮，第一张出场，视觉上就像一条永远不停的传送带，完全没有断层。

你可以在scroll事件上动手脚，但更推荐用requestAnimationFrame来控制动画节奏，平滑又不卡顿，性能也更稳。初学者的话，直接改下现成的 JS 文件，换下图也能跑。

资源打包在texiao5350_1560681059这个压缩包里，基本包含了 HTML+CSS+JS 完整结构，拿来就能用。页面里如果有多个滚动区域，也可以稍微改下class选择器，分区域控制。

哦对，文件里有写死图片高度的部分，建议配合position: absolute和父容器overflow: hidden一块用，效果更稳定，不然会有闪一下的 bug。

如果你在做商城首页、活动展示页、或者是品牌 LOGO 墙，这个滚动方式还蛮合适的。想了解更多做法，也可以看看下面几个类似资源，代码结构都差不多，上手挺快：

• js 无缝图片滚动
• js 文字无缝滚动和图片滚动
• javascript 上下无缝图片滚动
• JS 实现网页无缝滚动

，效果简单、实现高效，代码也不复杂。想快速给页面加点动感，这段 JS 代码值得一试。