缘起

ifuyun.com已经“像模像样”了，经过2个月的线上运行，无论功能还是细节，也优化得八九不离十了，但——唯独首页的轮播图还依然停留在静态图片方式。其实，在第一版的实现上，就已经设计了轮播图，并简单实现了轮播效果，但因彼时尚未接入CDN，多张图片的加载对于小水管实在一言难尽，因此在此后的版本中便暂时将其下线了……

偶遇

实现CDN的接入后，便一直惦记着这事，近日，走查未完成的TODO事项时，轮播图一事格外晃眼。罢，开始搞定它……

年初逛网时发现一个名为swiper的滑动插件，似乎使用的人颇多，可选择的效果也很完备。上去溜达一圈，有些交互还挺满意，但F12一看实现方式，犹豫了……

暂时搁置之后，无意中在B站首页上看到吃豆人的轮播图，眼前一亮……这不正是自己想要的吗？真是踏破铁鞋无觅处，得来全不费工夫！╰(*°▽°*)╯

好奇实现之余，特意搜索了下，看了排名第一的视频后，感觉甚是“繁琐”。无奈，只能亲自动手了……

原理

吃豆人的动画效果并不是通过gif等方式实现，而是直接通过CSS动画实现吃豆的效果。

焦点状态：放大圆的直径。
吃豆动画：上下2个半圆分别逆、顺时针旋转45°。
轮播图切换：判断是否最后一张，是则索引为0，否则索引+1。
手动切换：直接设置索引，并判断索引位置，设置吃豆方向。
轮播图切换动画：CSS动画。

完整效果参见：爱浮云。

实现