> 先上效果图，该转盘可以根据商品数量生成与商品数量相等的等面积扇形，蓝线是指针 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14a96cc0d25847cc917c065557310ea8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=343&h=273&s=19197&e=png&b=fefefe) > **想看源码和效果直接看这里：** > https://code.juejin.cn/pen/7280812102527221801 然后看不懂源码的或者想了解该转盘怎么实现的过程的，请看下面 - 首先在画圆之前，我们要先画一个扇形出来 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d780b0001223488085b2fcb90eaf55be~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=141&h=82&s=1079&e=png&b=ffffff) 实现代码如下： ```js ``` - 然后我们需要一个由多个扇形组成的圆，这个时候需要通过循环实现 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db13b2a9778c4af3b30e1a346018a061~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=255&h=248&s=9577&e=png&b=f50000) 实现代码如下： ```js ``` - 有了圆自然要开始想办法让它转起来了，所以要在循环外面加一个div，只要给这个div一个旋转的动画效果，这个转盘自然就转起来了 ```js ``` - 后面就是根据商品旋转选中商品的逻辑了，具体看源码。