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


点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部