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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 纯js图片碎片轮播图切换效果
纯js图片碎片轮播图切换效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-11-07
    阅读:
简要教程

这是一款纯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切换的时长 可选
    });               
                

网友评论