纯js图片碎片轮播图切换效果

这是一款纯js图片碎片轮播图切换效果。该轮播图在图片切换的时候，图片被碎片化处理，一张图片碎裂，下一张图片再从碎裂状态进行聚合，效果非常炫酷。

使用方法

在页面中引入style.css和main.js文件。

<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/main.js"></script>                  
                

HTML结构

该图片碎片轮播图切换效果的HTML结构如下：

<div class="banner" id="banner1">
  <div class="banner-view"></div>
  <div class="banner-btn"></div>
  <div class="banner-number"></div>
  <div class="banner-progres"></div>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该轮播图插件。

var banner = new FragmentBanner({
      container : "#banner1",//选择容器 必选
      imgs : ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'],//图片集合 必选
      size : {
        width : 1000,
        height : 560
      },//容器的大小 可选
      //行数与列数 可选
      grid : {
        line : 12,
        list : 14
      },
      index: 0,//图片集合的索引位置 可选
      type : 2,//切换类型 1 ， 2 可选
      boxTime : 5000,//小方块来回运动的时长 可选
      fnTime : 10000//banner切换的时长 可选
    });