🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[toc] # 实现 JS 原生轮播图 ![](https://img.kancloud.cn/ba/f5/baf54f7876633ac6064e4bbbfee3e819_714x518.gif) 实现方法: 1. JS + CSS 中的过滤 2. 纯 JS (独立实现每一帧的动画) 第一步、先实现循环滚动 ![](https://img.kancloud.cn/ed/34/ed343671839b9dea3cc91b8652b1c145_562x1186.png) 第二步、鼠标放上停止 、挪开启动 ![](https://img.kancloud.cn/23/18/2318484cfedd7019a8a1d0cc4263d5d9_864x1232.png) 第三步、添加左右按钮 先制作两个按钮: ![](https://img.kancloud.cn/8c/fd/8cfda7985452776aefe0fe2b5f45d5bd_1982x1542.png) 绑定事件 ![](https://img.kancloud.cn/48/9f/489f53ed15d80ed53dead3d89455ca05_952x972.png) # 实现 JS 原生购物画 ![](https://img.kancloud.cn/9e/df/9edf5316c083c7021c26b63878402681_714x518.gif)