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 相关文章推荐
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
js编写简易的计算器
Jul 29 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
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
非常好的js代码
2006/06/27 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Three.js基础部分学习
2017/01/08 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python实现发送QQ邮件的封装
2017/07/14 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python List cmp()知识点总结
2019/02/18 Python
Python中按值来获取指定的键
2019/03/04 Python
softmax及python实现过程解析
2019/09/30 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python实现区域填充的示例代码
2021/02/03 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
施工安全承诺书
2014/05/22 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
八达岭长城导游词
2015/01/30 职场文书
商务邀请函
2015/01/30 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python Django模型详解
2021/10/05 Python