jQuery实现碎片轮播图

碎片轮播图：

碎片轮播图顾名思义就是像碎片拼接而成的轮播图，若干个小方块碎片通过动画效果拼接成一张完整的图片。

实现原理：

轮播图的通常功能，都包括这几个部分，核心就是通过图片的索引值控制页面切换：

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="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.list {width: 560px;height: 300px;margin: 30px auto;position: relative;}li {position: absolute;display: none;}.content {width: 560px;height: 300px;position: absolute;}button {position: absolute;display: block;width: 40px;height: 40px;border-radius: 50%;border: none;z-index: 1000;color: rgba(255, 255, 255, 0.8);background-color: rgba(0, 0, 0, 0.4);font-size: 30px;}.btn1 {top: 50%;margin-top: -20px;}.btn2 {top: 50%;right: 0;margin-top: -20px;}.choose {display: block;}.point {width: 100px;height: 18px;line-height: 20px;position: absolute;bottom: 20px;left: 50%;margin-left: -50px;border-radius: 10px;background-color: rgba(255, 255, 255, 0.3);display: flex;justify-content: space-around;align-items: center;}span {width: 10px;height: 10px;border-radius: 50%;background-color: #fff;}.active {background-color: #f00;}.row {width: 560px;height: 100px;position: relative;}.col {position: absolute;width: 112px;height: 100px;display: inline-block;}</style>
</head>
<body><div class="list"><div class="main"><li class="choose"><img src="../轮播图/img/0.jpg" alt=""></li><li><img src="../轮播图/img/1.jpg" alt=""></li><li><img src="../轮播图/img/2.jpg" alt=""></li><li><img src="../轮播图/img/3.jpg" alt=""></li><li><img src="../轮播图/img/4.jpg" alt=""></li></div><div class="content"></div><button class="btn1">&lt;</button><button class="btn2">&gt;</button><div class="point"><span class="active"></span><span></span><span></span><span></span><span></span></div></div><script src="../轮播图/jquery.js"></script><script>var btns = $('button');var list = $('li');var index = 0;var pointers = $('span');var timebar;var content = $('.content');var str = '';for (var i = 0; i < 3; i++) {str += '<div class="row">';for (var j = 0; j < 5; j++) {str += '<div class="col"></div>';};str += '</div>';};content.html(str);content.find('.col').each(function(index) {$(this).css({backgroundPositionX: -112 * (index % 5),backgroundPositionY: -100 * parseInt(index / 5),left: 112 * (index % 5)});});//封装跳转页面函数function goPage(fn) {content.find('.col').css({backgroundImage: 'url(img/' + index + '.jpg)',width: 0,height: 0,opacity: 0}).each(function() {$(this).stop(true).animate({width: 112,height: 100,opacity: 1},500 + 1600 * Math.random(), function() {if (content.find('.col').is(":animated")) {return;};console.log(index);list.eq(index).addClass('choose').siblings().removeClass('choose');});});pointers.eq(index).addClass('active').siblings().removeClass('active');fn && fn();};//下一张btns.eq(1).click(function() {clearInterval(timebar);index++;if (index > 4) {index = 0;};goPage(startInterval);});//上一张btns.eq(0).click(function() {clearInterval(timebar);index--;if (index < 0) {index = 4;};goPage(startInterval);})//定时轮播 function startInterval() {timebar = setInterval(function() {index++;if (index > 4) {index = 0;};goPage();}, 5000);};startInterval();//圆点指定跳转pointers.click(function() {clearInterval(timebar);index = $(this).index();goPage(startInterval);})</script>
</body>
</html>

实现效果视频：

碎片轮播图