Vue自定义JS实现图片碎片轮播切换代码示例

PDF文件

54KB | 更新于2024-09-01 | 5 浏览量 | 举报收藏

立即下载

在本文档中，我们探讨了如何在Vue应用中实现一个自定义的JavaScript图片碎片轮播图切换效果。作者首先介绍了创建一个名为`banner.js`的外部脚本文件，这个文件包含了用于管理轮播图组件的关键类和方法。 1. **引入动画帧API**: 文档开始通过polyfill的方式引入了`requestAnimationFrame`和`cancelAnimationFrame`，这是实现流畅动画效果的基础，它们用于控制在浏览器重绘之前或之后执行特定函数，确保动画的性能优化。 2. **Banner组件配置**: `FragmentBanner` 类是核心，它定义了一系列可配置选项，如容器选择器(`container`)、控制器元素(`controller`)、图片数组(`imgs`)等。这些选项允许开发者根据项目需求定制轮播图的行为。 3. **参数验证与初始化**: 在构造函数中，遍历`whiteList`数组，检查传入的选项参数是否已定义，如果存在则将其赋值给对应的类属性。这样可以确保轮播图组件的正确配置。 4. **栅格系统**: 通过`grid`属性，定义了轮播图的网格结构，如行数(`line`)和列数(`list`)，这对于实现碎片化的图片显示至关重要。 5. **尺寸设置**: 定义了容器的默认宽度(`width`)和高度(`height`)，这有助于确保图片在不同屏幕尺寸下的适配。 6. **切换模式与定时器**: `type`属性表示切换模式，可能是1（默认）或其他自定义值。`fnTime`和`boxTime`分别用于设定每次切换的间隔时间和单个碎片移动的时间。同时，`activeTime`用于记录当前轮播状态的时间点。 7. **循环处理**: 代码中还提到一个循环遍历`option`对象的部分，这部分可能用于处理额外的配置项，或者确保所有预设的白名单属性都被覆盖，未定义的属性会被忽略。本文档提供了实现一个基于Vue的图片碎片轮播图组件的具体代码示例，包括了关键配置项的定义、动画管理以及用户自定义选项的处理。开发者可以根据需要调整参数，轻松实现具有独特切换效果的轮播图功能。

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

主要介绍了vue自定义js图片碎片轮播图切换效果的实现代码,需要的朋友可以参考下

定义一个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);

}

//数量

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38663443

粉丝: 7

Vue自定义JS实现图片碎片轮播切换代码示例

vue实现的轮播图

38种网页轮播特效（近乎涵盖网站所有的轮播样式，JS源码）

基于vue.js实现图片轮播效果

Vue自定义js实现图片碎片轮播效果及代码详解

vue.js实现简单轮播图效果

vue swipe自定义组件实现轮播效果

【JavaScript源代码】vue+rem自定义轮播图效果.docx

Vue实现内部组件轮播切换效果的示例代码

Vue+Rem实现自定义轮播图效果

Vue swipe自定义组件实现轮播效果示例及代码

最新资源