缘由
前段时间接到一个业务需求，要求做一个圆形旋转的轮播图，点击的时候，就旋转到该内容项。一开始觉得很简单，然后就爽快的答应了下来。等到实现的时候，发现事情并没有那么简单。要求的效果如下：
如上图所示：隔几秒钟，旋转到下一项，旋转到的当前项（cur_Index）会放大2倍，当前项的前后一项放大1.4倍。
开工
问题1：当时做到这个需求的时候，开始想，能把每一项放在这个大圆圈上旋转肯定是最好的，但是这样上面的内容随着大圆圈转动，方向也会改变，如下图（第一张）所示：
解决：大圆圈顺时针旋转的同时，内容项逆时针旋转，这样就能让内容项始终保持着直立的状态。（第二张）
问题2：虽然解决了内容项直立的问题，但是需求是几个内容项隔一段时间旋转，并且每一项旋转的角度是不一样的。
解决：隔几秒钟旋转这个容易解决，用setInterval解决就可以了。但是这个每个项选择角度不一致怎么解决呢？ 内容项都是放在外面的大圆圈上的。难道控制内容项做弧线运动？？？ 那这样完全没必要放在大圆圈上了。
想了很久，最后想到了一个办法，每一个内容项放在一个大圆圈上，7个内容项就有7个大圆圈，最后7个大圆圈重叠在一起。这样我们不就可以控制每一个圆圈的旋转角度了么。
问题3：我以为用一个大圆圈来承载一个内容这个方法已经完美解决了，但是依然还是有问题。圆圈的重叠会把前几个内容项的位置给占用了，这样用户点击的时候就点击不到该内容项。
解决：试着设置z-index能不能解决？ 但是好像是解决不了，毕竟每一个大圆圈都承载着一个内容项。那怎么办呢？
把每一个内容圈的背景色都设置为透明，然后最外层给设置一个点击位（不知道怎么称呼好，就这样大概称呼一下吧）。如下图所示：蓝色大圆圈承载所有的内容项，z-index设置最高，红色的点击位上来控制点击事件。最后将蓝色大圆圈和红色内容项的背景色全部设置为透明即可。
点击旋转
点击旋转这个我单独说一下我的写法哈。
要求效果：
点击当前项，无反应；
点击头部三个，把点击项逆时针旋转到指定的位置；
点击底部三个，把点击项顺时针旋转到指定的位置；
实现：因为我是用点击位来承载点击事件的，所以我们点击的click_index值跟当前cur_index值是没有联系的，甚至是跟其他的index值都是没联系的。那我们要做的就是联系在一起。
先是初始化一个数组来存[0, 1, 2, 3, 4, 5, 6]，当做是每一项的下标值，并用splice去掉cur_index这一项，那么数组剩下的就是剩余六个内容项。然后将内容项的位置进行一一对应。（从cur_index开始，逆时针往上数）
然后分逆时针旋转跟顺时针旋转： 用while循环来处理每一项需要旋转的角度（大角度80°，小角度40°），每次while后，刚刚初始化的数组sortArr会更新，因为这时候cur_index是更新的了，所以同时更新sortArr。然后继续while循环。其实就是一个while循环相当于逆时针或顺着旋转一个位置。通过index值来判断需要旋转几个值。
优化
当前这个是写死的，不能通过传几个值进去，然后动态生成几个值来旋转循环轮播。但是自己有考虑到这个情况，如果要做成动态的，首先：
1、内容项的大小是需要一个动态计算，不能相互粘在一起，而且需要考虑到cur_index放大倍数的处理。
2、内容项的旋转角度（大角度与小角度）需要有个计算规则。
总结
第一次写文章，望各位大佬诸多谅解哈。
以上是我当时做这个小需求的解决思路。可能会有更好的解决方法，欢迎大家留言私信，一起进步一起成长。谢谢大家！！！
这个demo我已放上github，有兴趣的小火胖可以下载来看看。
附上github地址：github.com/cyk970510/F…
