vue自定义js图片碎片轮播图切换效果的实现代码


Posted in Javascript onApril 28, 2019

定义一个banner.js文件,代码如下

;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)};
window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
var FragmentBanner = function(option) {
  //实例化时,可传的参数
  this.whiteList = ['container','controller','size','imgs','size','grid','index','fnTime','boxTime','type'];
  //容器将包容控制器
  this.container = '.banner';
  //默认的控制器
  this.controller = {
    view : '.banner-view',
    btn : '.banner-btn',
    num : '.banner-number',
    progre : '.banner-progres'
  };
  //栅格 行*列
  this.grid = {
    line : 5,
    list : 10
  };
  //容器的大小
  this.size = {
    width : 1200,
    height : 675,
  };
  //切换类型
  this.type = 1;
  //索引位置
  this.index = 0;
  //函数每次切换时间
  this.fnTime = 5000;
  //栅格每次运动时间
  this.boxTime = 2000;
  //栅格运动结束的时间
  this.activeTime = new Date();
  for(var a = 0,attrLenght = this.whiteList.length; a < attrLenght;a++){
    var attr = this.whiteList[a];
    if(option[attr] != undefined){
      this[attr] = option[attr];
    }
  }
  for(var i in option){
    if(this.whiteList[i] !== undefined){ ; }
  }
  init();
}
function setIndex(){
  this.index %= this.imgs.length;
  this.index = (this.index < 0) ? this.imgs.length - 1 : this.index;
  this.elem.numFind[this.index].className = 'on'; 
}
function init(){
  this.container = document.querySelector(this.container)
  if(!this.container){
    return alert('获取banner容器失败');
  }else{
    this.container.style.width = this.size.width+'px';
    this.container.style.height = this.size.height+'px';
  }
  this.elem = {};
  for(var e in this.controller){
    this.elem[e] = this.container.querySelector(this.controller[e]);
    if(this.elem[e] == null){
      return alert('获取'+e+'容器');
    }
  }
  //栅格
  var w = this.size.width / this.grid.list,
    h = this.size.height / this.grid.line;
  this.elem.viewBox = new Array();
  for(var i = 0,iL = this.grid.line;i < iL;i++){
    for(var j = 0,jL = this.grid.list;j < jL;j++){
      var newI = document.createElement('i');
      setCss(newI,{
        width : w+'px',
        height : h+'px',
        left : 0,
        top : 0,
        opacity : 1,
        backgroundImage : 'url("'+this.imgs[this.index]+'")',
        backgroundSize : this.size.width + 'px ' + this.size.height +'px',
        backgroundPosition : w * -j+'px ' + h * -i+'px'
      });
      this.elem.view.appendChild(newI);
      this.elem.viewBox.push(newI);
    }
  }
  //按钮动作
  for (var b = 1; b >= 0; b--) {
    var oB = document.createElement('span');
    (b) ? oB.innerHTML = '<' : oB.innerHTML = '>';
    oB.setIndex = b;
    oB.onclick = function(obj){
      show({
        switch : true,
        change : obj.setIndex == 0
      });
    }.bind(this,oB);
    this.elem.btn.appendChild(oB);
  }
  //数量
  for(var n = 0,nL = this.imgs.length; n < nL;n++){
    var oI = document.createElement('i');
    oI.setIndex = n;
    oI.onclick = function(obj){
      //显示动画
      show({
        switch : true,
        change : obj.setIndex
      });
    }.bind(this,oI)
    this.elem.num.appendChild(oI);
  }
  this.elem.numFind = this.elem.num.querySelectorAll('i');
  //进度条
  this.progre = new Array;
  for(var p = 1;p >= 0;p--){
    var oP = document.createElement('i');
    setCss(oP,{
      width : 0,
      backgroundColor : p ? '#00c3ff' : '#ffc300'
    });
    this.elem.progre.appendChild(oP);
    this.progre.push(oP);
  }
  //显示动画
  show();
  this.elem.numFind[this.index].className = 'on';
}
function setCss(obj,json){
  for( c in json){
    if(c == 'opacity'){
      obj.style.opacity = c;
      obj.style.filter = "alpha(opacity="+ (json[c]*100) +")";
    }else{
      obj.style[c] = json[c];
    }
  }
  return this;
}
function show(order){
  order = order || {};
  if(new Date() >= this.activeTime){
    this.elem.numFind[this.index].className = '';
    // 下次播放动画时候的进度条
    setCss(this.progre[1],{width : 0})
    anime(this.progre[1],{
        width : this.size.width
      },this.fnTime,function(){
        show({
          switch : true,
          change : true
        });
      }.bind(this));
    var status = true,
      activeTime = 0;
    for( var i = 0,iL = this.elem.viewBox.length;i < iL;i++ ){
      var startTime = getTypeTime(),
        endTime = getTypeTime(),
        obj = this.elem.viewBox[i];
        activeTime = Math.max(activeTime,startTime[1] + endTime[1]);
      anime(obj,{
        left : Math.ceil(Math.random() * this.size.width * 2 - this.size.width),
        top : Math.ceil(Math.random() * this.size.height * 2 - this.size.height),
        opacity: 0
      }, startTime[0] ,function(obj){
        if(order.switch && status){
          if(/number/i.test(typeof order.change)){
            this.index = order.change;
          }else{
            (order.change) ? ++this.index : --this.index;
          }
          setIndex();
          this.elem.numFind[this.index].className = 'on';
          status = false;
        }
        setCss(obj,{backgroundImage : 'url("'+this.imgs[this.index]+'")'})
        anime(obj,{
            left : 0,
            top : 0,
            opacity : 1
          },endTime[0]);
      }.bind(this,obj));
    }
    //栅格结束运动的时间
    this.activeTime = new Date(new Date().getTime() + activeTime);
    setCss(this.progre[0],{width : 0})
    anime(this.progre[0],{width : this.size.width},activeTime);
  }
}
function getTypeTime(){
  var timer = new Array();
  switch(this.type){
    case 1:
      timer.push(this.boxTime / 4 + Math.random() * this.boxTime / 4);
      timer.push(timer[0]);
    break;
    default:
      timer.push([Math.random() * this.boxTime / 5,this.boxTime / 10 * 3]);
      timer.push(timer[0][0] + timer[0][1]);
    break;
  }
  return timer;
}
function anime(obj,attr,endTime,callback) {
  (obj.timer) && cancelAnimationFrame(obj.timer);
  var cssJosn = obj.currentStyle || getComputedStyle(obj,null),
    start = {},end = {},goTime;
  //设置初始属性值和结束属性值
  for(var key in attr){
    if(attr[key] != parseFloat(cssJosn[key])){
      start[key] = parseFloat(cssJosn[key]);
      end[key] = attr[key] - start[key];
    }
  }
  goTime = new Date();
  if(endTime instanceof Array){
     (function delayFn(){
       if((new Date() - goTime) >= endTime[0]){
         endTime = endTime[1];
         goTime = new Date();
         ref();
       }else{
         obj.timer = requestAnimationFrame(delayFn);
       }
     })();
  }else{
    ref();
  }
  function ref(){
    var prop = (new Date() - goTime) / endTime;
    (prop >= 1) ? prop = 1 : obj.timer = requestAnimationFrame(ref);
    for(var key in start){
      var val = -end[key] * prop *(prop-2) + start[key];

      if(key == 'opacity'){

        obj.style.opacity = val;
        obj.style.filter = "alpha(opacity="+ (val*100) +")";
      }else{

        obj.style[key] = val+'px';
      }
    }

    (prop === 1) && callback && callback.call(obj);
  };
}
module.exports.FragmentBanner = FragmentBanner;

在需要的组件里面引入改js

import {FragmentBanner} from '../../../static/js/banner.js'

使用方式如下

// html代码
<header class="js_header mod-header">
   <div class="banner" id="banner1" style="margin: 50px auto;margin-bottom:0px">
      <div class="banner-view"></div>
      <div class="banner-btn"></div>
      <div class="banner-number"></div>
      <div class="banner-progres"></div>
   </div>
 </header>
//css样式
<style>
.banner{
  position: relative;
  overflow: hidden;
}
.banner-view{
  position: relative;
  height: 100%;
  z-index: 999;
  background-color: #090b22;
  background-repeat: no-repeat;
}
.banner-view i{
  position: relative;
  display: block;
  float: left;
  background-repeat: no-repeat;
}
.banner-btn{
  position: absolute;
  width: 100%;
  height: 0;
  top: 45%;
  font-family: "宋体";
  font-size: 20px;
  z-index: 999;
}
.banner-btn span{
  display: block;
  float: left;
  width: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #27cfc3;
  color: white;
  cursor: pointer;
  font-weight: 800;
  /* position: absolute;
  right:-150px; */
  /* background-image: url(../../../static/images/style-index.d437fb5e.png);
 background-position: -268px -18px;
 width: 56px;
 height: 56px; */
}
/* 
.banner-btn span:first-child{
  left: -150px;
} */
.banner-btn span:hover{
  background-color: rgba(0,0,0,0.6);
}
.banner-btn span + span{
  float: right;
}
.banner-number{
  position: absolute;
  bottom: 35px;
  width: 100%;
  height: 0;
  font-size: 0;
  text-align: center;
  z-index: 1000;
}
.banner-number > *{
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  margin: 0 8px;
  width: 10px;
  height: 10px;
  background-color: #00c3ff;
  cursor: pointer;
}
.banner-number > *:hover,
.banner-number > *.on{
  background-color: #ffc300;
}
.banner-progres{
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 3px;
  z-index: 1000;
}
.banner-progres i{
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
  display: block;
  height: 100%;
  width: 0;
}
</style>
// js的引用
this.obj = {
      container : '#banner1',//选择容器 必选
      imgs : ['https://www.xuanfengge.com/wp-content/themes/lee3.0/dist/img/banner/1.0bd56759.jpg','https://www.xuanfengge.com/wp-content/themes/lee3.0/dist/img/banner/6.c6b4ec87.jpg'],//图片集合 必选
      size : {
        width : 1200,
        height : 300
      },//容器的大小 可选
      //行数与列数 可选
      grid : {
        line : 12,
        list : 14
      },
      index: 0,//图片集合的索引位置 可选
      type : 2,//切换类型 1 , 2 可选
      boxTime : 5000,//小方块来回运动的时长 可选
      fnTime : 10000//banner切换的时长 可选
   }
mounted () {
  FragmentBanner(this.obj );
 }

总结

以上所述是小编给大家介绍的vue自定义js图片碎片轮播图切换效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 #Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 #Javascript
详解小程序退出页面时清除定时器
Apr 28 #Javascript
详解在Javascript中进行面向切面编程
Apr 28 #Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 #Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 #Javascript
vue操作动画的记录animate.css实例代码
Apr 26 #Javascript
You might like
curl实现站外采集的方法和技巧
2014/01/31 PHP
php递归创建目录的方法
2015/02/02 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python中list循环语句用法实例
2014/11/10 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python3多线程基础知识点
2019/02/19 Python
Python selenium的基本使用方法分析
2019/12/21 Python
django model object序列化实例
2020/03/13 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
整脏治乱工作简报
2015/07/21 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技