[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)