该博客介绍了如何利用jQuery实现碎片轮播图。在普通轮播图基础上，通过控制多个小div的background-position拼接成完整图片，并使用animate动画在切换时产生碎片效果。文章还分享了实现原理、源码及效果视频。
碎片轮播图：
碎片轮播图顾名思义就是像碎片拼接而成的轮播图，若干个小方块碎片通过动画效果拼接成一张完整的图片。
实现原理：
轮播图的通常功能，都包括这几个部分，核心就是通过图片的索引值控制页面切换：
1.点击上一页切换到上一页（index++），点击下一页切换到下一页（index--）；
2.小圆点与图片绑定，点击小圆点，跳转至对应的图片；跳转至对应的图片，小圆点样式改变（index）；
3.定时轮播(setInterval方法)；
碎片轮播图在普通轮播图的基础上增加了一点，就是在切换图片时，页面有碎片感。我们实现原理：
用一个类名为main的div放置所有的图片（绝对定位），另外建立一个同级的类名为content的div（绝对定位），都是绝对定位，而且div大小设置的相同，相对于把类名为content的div覆盖在类名为main的div上面。再在类名为content的div中创建若干个小div，小div的background-imge都设置为同一张图片，且通过background-position给背景图定位，使得所有的小div的背景图拼接起来刚好是完整的一张图片。图片切换时的碎片感则通过jQuery的animate动画完成，让小div的宽高在指定动画时间内从0增加至指定的宽高，从而呈现一张完整的图片。
似乎上面的逻辑已经可以实现碎片轮播图了，那么类名为main的div的作用又是什么呢？如果我们仅完成上述逻辑，碎片轮播图看起来是正常的，但是观察就可以发现，在切换图片时动画执行过程中背景图是空白的（可以理解为换衣服的时候里面没穿打底），也就是不太美观。如果我们在每次动画完成之后，将类名为main的div中的图片换成跟动画一样的图片，在我们碎片动画执行的间隙，我们就会看到底下是上一张图片（里面穿了打底换衣服时露出是打底），这样衔接就非常好。
大致思路就是这样，至于轮播图中其他大大小小的细节就不多讲了，我是个菜鸟，我会的大家应该都会，哈哈哈哈。（献上源码，不理解的地方可以直接问我也行，很乐于帮助别人）
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content
最低0.47元/天 解锁文章
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
