自己编写的轮播图移动端和PC端都可以用
代码如下:
class Banner {
constructor(dom = undefined, json = undefined) {
this.dom = dom;
this.json = json;
this.indexqj = 0;
this.parameterdone = false;
this.timerisauto = null;
this.Judgmentconditions();
this.anstyle(this.indexqj);
this.truedone();
}
// 判断条件
Judgmentconditions() {
// 判断参数
if (this.dom && this.json) {
// done 判断
this.parameterdone = true;
} else if (this.json == undefined) {
if (this.dom.__proto__.constructor != Object) {
// done 判断
this.parameterdone = 'truedone';
} else {
// done 判断
this.parameterdone = false;
console.error('为获取到元素你填入的参数必须是两位');
}
}
// ————————————————
this.Judgedemand(this.parameterdone);
}
// 判断需求
Judgedemand(done) {
if (done) {
if (this.json) {
let dom, move, pagination, seamless, loop, isauto, isclick,
obj = this.json;
// ——————————*** container
if (obj.container) {
dom = this.element(obj.container);
} else {
dom = this.element(this.dom).firstElementChild;
console.error('为获取到元素 默认为你添加为' + this.dom + '的第一个孩子');
}
// ——————————***direction
if (obj.direction) {
if (obj.direction == 'left') {
move = obj.direction;
} else if (obj.direction == 'top') {
move = obj.direction;
} else {
move = 'left';
};
} else {
move = 'left';
}
// ——————————***pagination
if (obj.pagination) {
pagination = true;
} else {
pagination = false;
}
// ——————————***seamless
if (obj.seamless) {
seamless = true;
} else {
seamless = false;
}
// obj.pagination.isclick
if (pagination) {
if (obj.pagination.isclick) {
if (obj.pagination.isclick == true) {
isclick = obj.pagination.isclick == true;
} else if (obj.pagination.isclick == "true") {
isclick = obj.pagination.isclick;
} else if (obj.pagination.isclick == 'false') {
isclick = obj.pagination.isclick;
} else {
isclick = false;
console.error(obj.pagination.isclick + '获取失败');
}
} else {
isclick = false;
}
if (obj.pagination.tagname) {
let doman = this.element(obj.pagination.tagname);
if (doman) {
this.isan = doman;
this.anlength = dom.children.length;
}
} else {
console.error(' obj.pagination.tagname 未获取到');
}
}
// obj.seamless.loop
if (seamless) {
if (obj.seamless.loop) {
if (obj.seamless.loop == true) {
loop = obj.seamless.loop == true;
} else if (obj.seamless.loop == "true") {
loop = obj.seamless.loop;
} else if (obj.seamless.loop == 'false') {
loop = obj.seamless.loop;
} else {
loop = false;
console.error(obj.seamless.loop + '获取失败');
}
} else {
loop = false;
}
if (obj.seamless.isauto) {
if (obj.seamless.isauto == true) {
isauto = obj.seamless.isauto == true;
} else if (obj.seamless.isauto == "true") {
isauto = obj.seamless.isauto;
} else if (obj.seamless.isauto == 'false') {
isauto = obj.seamless.isauto;
} else {
isauto = false;
console.error(obj.seamless.isauto + '获取失败');
}
} else {
isauto = false;
}
// 是否自动轮播
} {
// 标签名
this.domName = dom;
// 移动方向
this.move = move;
// 点击的按钮
this.pagination = pagination;
// 是否轮播
this.seamless = seamless;
// isclick
this.isclick = isclick;
// loop
this.loop = loop;
// isauto
this.isauto = isauto;
// 调用样式
this.style();
this.tiemrall();
}
} else {
if(this.parameterdone == 'truedone'){
// 这里是初始化 就你你没有填写要求只填写了元素就会给据元素寻找容器
// 这里默认是他第一个孩子
let domName = this.element(this.dom).firstElementChild;
this.domName = domName;
this.move = 'left';
this.loop = false;
// 调用样式
this.style();
console.log(`${this.domName} ${this.move} ${this.loop}`);
}
}
}
};
// 根据代码要求添加演示
style() {
this.Encapsulationstyle(this.domName.parentNode, {
'position': 'relative'
});
// 这里判断的是 left 移动方向
if (this.move == 'left') {
// 添加按钮
if (this.isan) {
let div = document.createElement('div');
this.isan.appendChild(div);
let html = '';
for (let i = 0; i < this.anlength; i++) {
html += `<span class="anclick"></span>`;
}
this.isan.firstElementChild.innerHTML = html;
this.Encapsulationstyle(this.isan, {
'width': this.domName.parentNode.offsetWidth + 'px',
'height': '1rem',
'position': 'absolute',
'bottom': '0.3rem',
'zIndex': '100',
'left': '0rem',
});
// 给每个按钮添加样式
for (let i = 0; i < this.isan.firstElementChild.children.length; i++) {
this.Encapsulationstyle(this.isan.firstElementChild.children[i], {
'display': 'inline-block',
'height': '0.4rem',
'width': '0.4rem',
'backgroundColor': 'rgba(0,0,0,0.45)',
'borderRadius': '50%',
'margin': '0 0.2rem'
})
}
this.isan.firstElementChild.children[0].className = 'anclick isclick_auto'
this.Encapsulationstyle(this.isan.firstElementChild, {
'width': this.isan.firstElementChild.children.length * 0.4 + this.isan.firstElementChild
.children.length * 0.4 + 'rem',
'height': '1rem',
'display': 'flex',
'flexWrap': 'nowrap',
'alignItems': 'center',
'margin': '0 auto'
})
this.click();
}
// 给每个按钮添加宽和高 left
// 这里是判段的是 无缝隙
if (this.loop == true || this.loop == 'true') {
let dom1, dom2, dom3;
// 这里添加元素
dom1 = this.domName.firstElementChild.cloneNode(true);
dom3 = this.domName.firstElementChild.nextElementSibling.cloneNode(true);
dom2 = this.domName.lastElementChild.cloneNode(true);
this.domName.appendChild(dom1);
this.domName.appendChild(dom3);
this.domName.prepend(dom2);
// 根据固定的样式添加样式
this.Encapsulationstyle(this.domName, {
'position': 'absolute',
'display': 'flex',
'flexWrap': 'nowrap',
'width': this.domName.children.length * this.domName.children[0].offsetWidth + 'px',
'left': -this.domName.children[0].offsetWidth + 'px',
});
// 这里是判段的不是 无缝隙
} else if (this.loop == false || this.loop == 'false') {
// console.log(1111);
// 根据固定的样式添加样式
this.Encapsulationstyle(this.domName, {
'position': 'absolute',
'display': 'flex',
'flexWrap': 'nowrap',
'transitionDuration': '0',
'left':'0px',
'width': this.domName.children.length * this.domName.children[0].offsetWidth + 'px'
});
}
// 这里判断的是 top 移动方向
} else if (this.move == 'top') {
// 添加按钮
if (this.isan) {
let div = document.createElement('div');
this.isan.appendChild(div);
let html = '';
for (let i = 0; i < this.anlength; i++) {
html += `<span class="anclick"></span>`;
}
this.isan.firstElementChild.innerHTML = html;
this.Encapsulationstyle(this.isan, {
'height': this.domName.parentNode.offsetHeight + 'px',
'width': '1rem',
'position': 'absolute',
'right': '0.5rem',
'zIndex': '100',
'top': '0rem',
});
// 给每个按钮添加样式
for (let i = 0; i < this.isan.firstElementChild.children.length; i++) {
this.Encapsulationstyle(this.isan.firstElementChild.children[i], {
'display': 'inline-block',
'height': '0.4rem',
'width': '0.4rem',
'backgroundColor': 'rgba(0,0,0,0.45)',
'borderRadius': '50%',
'margin': '0.2rem 0.2rem'
})
}
this.isan.firstElementChild.children[0].className = 'anclick isclick_auto'
this.Encapsulationstyle(this.isan.firstElementChild, {
'height': this.isan.firstElementChild.children.length * 0.4 + this.isan
.firstElementChild.children.length * 0.4 + 'px',
'width': '1rem',
'display': 'flex',
'flexWrap': 'wrap',
'alignItems': 'center',
'margin': '50% 0'
})
this.click();
}
// 给每个按钮添加宽和高 top
let dom1, dom2, domc, dom3;
// 这里是判段的是 无缝隙
if (this.loop == true || this.loop == 'true') {
// 这里添加元素
dom1 = this.domName.firstElementChild.cloneNode(true);
dom3 = this.domName.firstElementChild.nextElementSibling.cloneNode(true);
dom2 = this.domName.lastElementChild.cloneNode(true);
this.domName.appendChild(dom1);
this.domName.prepend(dom2);
this.domName.appendChild(dom3);
// 根据固定的样式添加样式
domc = this.domName.children;
// top 值 要把每个孩子距离下边距离 为 0.5 固定
for (let i = 0; i < domc.length - 1; i++) {
this.Encapsulationstyle(domc[i], {
'marginBottom': '0.5rem'
})
}
this.Encapsulationstyle(this.domName, {
'position': 'absolute',
'top': -this.domName.children[1].offsetTop + 'px',
'height': this.domName.children.length * this.domName.children[0].offsetHeight + 'px',
})
// 这里是判段的不是 无缝隙
} else if (this.loop == false || this.loop == 'false') {
domc = this.domName.children;
// top 值 要把每个孩子距离下边距离 为 0.5 固定
for (let i = 0; i < domc.length - 1; i++) {
this.Encapsulationstyle(domc[i], {
'marginBottom': '0.5rem'
})
}
// 根据固定的样式添加样式
this.Encapsulationstyle(this.domName, {
'position': 'absolute',
'top':'0px',
'height': this.domName.children.length * this.domName.children[0].offsetHeight + 'px'
});
}
}
// 按下事件
this.down();
}
// 封装按下事件
downs(event) {
let e = event,
dom, arr = [e.pageX, e.pageY],
array = ['left', 'top'],
newarray = ['offsetleft', 'offsettop'],
indexmove, num = 0;
clearInterval(this.timerdown)
this.timerdown = setInterval(() => {
if (num >= 30) {
num = 0;
} else {
num++;
}
this.num = num;
}, 30);
this.Encapsulationstyle(this.domName, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '0ms'
});
for (let i = 0; i < array.length; i++) {
if (this.move == array[i]) {
indexmove = i;
}
}
dom = parseInt(getStyle(this.domName, array[indexmove]));
this.moveyd(arr[indexmove], dom);
}
// 移动端 按下事件
down() {
this.domName.parentNode.ontouchstart = event => {
this.updone = false;
this.downs(event.changedTouches[0]);
clearInterval(this.timerisauto);
}
this.domName.parentNode.onmousedown = event => {
this.documentdone = true;
this.updone = false;
let e = event || window.event;
this.downs(event || window.event);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
};
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
clearInterval(this.timerisauto);
}
}
// 移动 事件封装
moves(event, x, dom) {
let e = event,
yd,
domc,
move,
indexs,
jlmove,
width,
jl1,
jl2,
mj,
dj,
indexmove,
arr = [e.pageX, e.pageY],
array = ['left', 'top'],
newarray = ['offsetLeft', 'offsetTop'],
newarrays = ['offsetWidth', 'offsetHeight']
indexmove;
// 根据要求去拿数据
for (let i = 0; i < array.length; i++) {
if (this.move == array[i]) {
indexmove = i;
}
}
// 用移动的距离减去按下的距离
yd = arr[indexmove] - x;
indexs = 0;
// 这里是判断移动的方向
jlmove = parseInt(getStyle(this.domName, array[indexmove]));
domc = Array.from(this.domName.children);
// 用移动的距离减去按下的距离得出结果后 然后 去加元素距离左边的距离
if (this.move == 'left') {
this.Encapsulationstyle(this.domName, {
'left': yd + dom + 'px'
});
} else if (this.move == 'top') {
this.Encapsulationstyle(this.domName, {
'top': yd + dom + 'px'
});
}
// 去判断元素距离左边的距离如果和他的那个孩子相同距离左边的距离相同去拿下表
domc.forEach((item, index) => {
jl1 = Math.abs(jlmove);
jl2 = Math.abs(item[newarray[indexmove]] - item[newarrays[indexmove]] * (1 / 2));
if (jl1 >= jl2) {
indexs = index;
// 判断出来就拿下标
// 如果下标小于 0 的时候就让他为 0
if (jlmove >= 0) {
indexs = 0;
}
}
// 再把下标 赋值给 全局使用的下标
this.indexqj = indexs;
});
// 生命变量 在传参
mj = arr[indexmove];
dj = x;
// 调用松开事件
this.up(jlmove, mj, dj);
}
// 移动端 移动事件
moveyd(x, dom) {
this.domName.parentNode.ontouchmove = event => {
this.updone = true;
this.moves(event.changedTouches[0], x, dom);
}
// this.domName.parentNode.onmousemove = event => {
// this.updone = true;
// this.moves(event || window.event, x, dom);
// }
document.onmousemove = event => {
this.updone = true;
this.moves(event || window.event, x, dom);
}
}
// 封装up事件
ups(jlmove, move, down) {
clearInterval(this.timerdown);
if (this.updone) {
if (move > down) {
if (this.num <= 6) {
this.indexqj--;
}
} else if (move < down && this.updone) {
if (this.num <= 6) {
this.indexqj++;
}
}
}
if (this.loop == true || this.loop == 'true') {
if (this.indexqj <= 0) {
this.anstyle(this.domName.children.length - 4);
} else if (this.indexqj >= this.domName.children.length - 2) {
this.anstyle(0);
} else {
this.anstyle(this.indexqj - 1);
}
this.looptrue(this.move, this.domName, this.indexqj, jlmove);
this.loopfalse(this.move, this.domName, this.indexqj);
} else if (this.loop == false || this.loop == 'false') {
if (this.indexqj <= 0) {
this.indexqj = 0;
} else if (this.indexqj >= this.domName.children.length - 1) {
this.indexqj = this.domName.children.length - 1;
}
this.loopfalse(this.move, this.domName, this.indexqj);
this.anstyle(this.indexqj);
}
this.updoen = false;
}
// 移动端 松开事件
up(jlmove, move, down) {
this.domName.parentNode.ontouchend = event => {
if (this.updone) {
this.ups(jlmove, move, down);
this.updone = false;
}
this.tiemrall();
this.domName.parentNode.onmousemove = null;
document.onmousemove = null;
}
document.onmouseup = () => {
console.log();
if(this.documentdone && this.updone){
this.ups(jlmove, move, down);
this.documentdone = false;
this.updone = false;
}
this.domName.parentNode.onmousemove = null;
document.onmousemove = null;
this.tiemrall();
}
}
// 是无缝隙轮播图
looptrue(move, dom, index, jlmove) {
let movejl = 0,
dom1, dom2, dom3, html = parseInt(getStyle(document.querySelector('html'), 'font-size')) * 3;
switch (move) {
case 'left':
if (index <= 0) {
index = dom.children.length - 3;
movejl = dom.children[index].offsetLeft;
this.Encapsulationstyle(dom, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '0ms',
'left': -(movejl - jlmove) + 'px'
});
} else if (index >= dom.children.length - 2) {
dom1 = parseInt(getStyle(dom.parentNode, 'width'));
dom2 = parseInt(getStyle(dom, 'width'));
dom3 = jlmove;
index = 1;
movejl = dom.children[index].offsetLeft + dom.children[index].offsetWidth;
this.Encapsulationstyle(dom, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '0ms',
'left': (dom2 - dom1) + dom3 - movejl + 'px'
});
};
this.indexqj = index;
break;
case 'top':
if (index <= 0) {
index = dom.children.length - 3;
movejl = dom.children[index].offsetTop;
this.Encapsulationstyle(dom, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '0ms',
'top': -(movejl - jlmove) + 'px'
});
} else if (index >= dom.children.length - 2) {
dom1 = parseInt(getStyle(dom.parentNode, 'height'));
dom2 = parseInt(getStyle(dom, 'height'));
dom3 = jlmove;
index = 1;
movejl = dom.children[index].offsetTop + dom.children[index].offsetHeight;
this.Encapsulationstyle(dom, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '0ms',
'top': (dom2 - dom1) + dom3 - movejl + html + 'px'
});
};
this.indexqj = index;
break;
}
}
// 按钮事件
click() {
let dom = Array.from(this.isan.firstElementChild.children),
domf = this.isan,
that = this;
if (this.isclick != false && this.isclick != 'false') {
dom.forEach((item, index) => {
// 移动端的按下事件
item.ontouchstart = function(event) {
that.clickan(index, event);
clearInterval(that.timerisauto);
}
// 移动端的松开事件
item.ontouchend = function(event) {
that.tiemrall();
}
// pc 端的按下事件
item.onmousedown = function(event) {
that.clickan(index, event);
clearInterval(that.timerisauto);
}
// pc 端的松开事件
item.onmouseup = function(event) {
that.tiemrall();
}
})
}
// 移动端的移动事件 阻止冒泡
domf.ontouchmove = event => {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
}
// 移动端 的按下事件 阻止冒泡
domf.ontouchstart = event => {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
}
domf.firstElementChild.ontouchstart = event => {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
}
// PC 端的按下事件 阻止冒泡
domf.onmousedown = event => {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
}
// PC 端的移动事件 阻止冒泡
domf.onmousemove = event => {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
}
}
// 按钮点击封装
clickan(index, event) {
let e = event || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
};
if (this.loop == true || this.loop == 'true') {
this.anstyle(index);
this.indexqj = index + 1;
this.loopfalse(this.move, this.domName, index + 1);
} else if (this.loop == false || this.loop == 'false') {
this.anstyle(index);
this.indexqj = index;
this.loopfalse(this.move, this.domName, index);
}
}
// 按钮改变样式
anstyle(index) {
if(this.pagination == false){
return;
}
if(this.parameterdone == true){
let dom = Array.from(this.isan.firstElementChild.children)
for (let i = 0; i < dom.length; i++) {
dom[i].className = 'anclick';
dom[i].style.backgroundColor = 'rgba(0,0,0,0.45)'
}
dom[index].className = 'anclick isclick_auto';
dom[index].style.backgroundColor = '#fff';
}
}
// 定时器
tiemrall() {
if (this.isauto != false && this.isauto != 'false') {
clearInterval(this.timerisauto);
let movejl;
this.timerisauto = setInterval(() => {
this.indexqj = this.timerallloop(this.indexqj, movejl, this.move);
}, 3000);
// 第一次动会先缓存一下定时器
}
}
// 定时器封装轮播
timerallloop(index, movejl, move) {
if (this.loop == true || this.loop == 'true') {
if(index <= 0){
index = 1;
}
index++;
switch (move) {
case 'left':
if (index >= this.domName.children.length - 2) {
index = 1;
movejl = this.domName.children[index - 1].offsetLeft;
this.Encapsulationstyle(this.domName, {
'transitionDuration': '0ms',
'left': -movejl + 'px'
});
}
movejl = this.domName.children[index].offsetLeft;
this.Encapsulationstyle(this.domName, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '300ms',
'left': -movejl + 'px'
});
break;
case 'top':
if (index >= this.domName.children.length - 2) {
index = 1;
movejl = this.domName.children[index - 1].offsetTop;
this.Encapsulationstyle(this.domName, {
'transitionDuration': '0ms',
'top': -movejl + 'px'
});
}
movejl = this.domName.children[index].offsetTop;
this.Encapsulationstyle(this.domName, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '300ms',
'top': -movejl + 'px'
});
break;
}
if (index <= 0) {
this.anstyle(this.domName.children.length - 4);
} else if (index >= this.domName.children.length - 2) {
this.anstyle(0);
} else {
this.anstyle(index - 1);
}
} else if (this.loop == false || this.loop == 'false') {
this.loopfalse(this.move, this.domName, index);
this.anstyle(index);
if (index >= this.domName.children.length - 1) {
index = 0;
} else {
index++;
}
}
return index;
}
// 不是无缝隙封装
loopfalse(move, dom, index = 0) {
let movejl = 0;
if(index <= -1){
index = this.domName.children.length - 3;
}
switch (move) {
case 'left':
movejl = dom.children[index].offsetLeft;
this.Encapsulationstyle(dom, {
'transitionProperty':'left',
'transitionTimingFunction': 'ease-out',
'transitionDuration': '300ms',
'left': `${-movejl}px`,
});
break;
case 'top':
movejl = dom.children[index].offsetTop;
this.Encapsulationstyle(dom, {
'transitionTimingFunction': 'ease-out',
'transitionDuration': '300ms',
'top': -movejl + 'px'
});
break;
}
}
// --------
// truedone
truedone () {
console.log(`${this.parameterdone == 'truedone'}`);
}
// 封装样式
Encapsulationstyle(dom, json) {
// 封装 标签样式
let attr, data;
// 数据
for (let attr in json) {
// 用 for 循环
data = json[attr];
// data 每个 值
// attr 每个键
if (attr == 'width') {
// 假如 键是宽 就要判断 他的这个宽是否 带没带单位
if (!data.endsWith('rem') && !data.endsWith('px')) {
dom.style[attr] = data + 'rem';
// 如果没带单位 就用代码去给他加
} else {
dom.style[attr] = data;
};
} else if (attr == 'height') {
if (!data.endsWith('rem') && !data.endsWith('px')) {
dom.style[attr] = data + 'rem';
// 这里一样的 加单位
} else {
dom.style[attr] = data;
// 这里是其他的
};
} else {
dom.style[attr] = data;
// 这里是其他的
};
};
}
// 根据你传来的数据来获取元素
element(dom) {
let domelement, targetName, indexof, lastindexof, index, elements;
// 所需的变量
// 判断是不是字符全 如果是就会根据要求 获取数据
if (typeof dom == 'string') {
// 判断 为 class
if (dom.startsWith('.')) {
// 判断 为 class 有没有下标 如果有则获取
if (dom.endsWith(']')) {
lastindexof = dom.length - 1;
for (let i = 0; i < dom.length; i++) {
if (dom[dom.length - i] == '[') {
indexof = i;
}
}
index = dom.substring(dom.length - indexof + 1, lastindexof);
elements = dom.substring(0, dom.length - indexof);
targetName = elements.split('.')[1];
domelement = document.getElementsByClassName(targetName)[index];
// 判断 为 class 直接根据要求获取
} else {
targetName = dom.split('.')[1];
domelement = document.getElementsByClassName(targetName)[0];
};
// 判断 为 id 直接根据要求获取
} else if (dom.startsWith('#')) {
targetName = dom.split('#')[1];
domelement = document.getElementById(targetName);
// 判断 为 标签名
} else if (dom.endsWith(']')) {
lastindexof = dom.length - 1;
for (let i = 0; i < dom.length; i++) {
if (dom[dom.length - i] == '[') {
indexof = i;
}
}
index = dom.substring(dom.length - indexof + 1, lastindexof);
elements = dom.substring(0, dom.length - indexof);
domelement = document.getElementsByTagName(elements)[index];
// 判断 为 name
if (!domelement) {
lastindexof = dom.length - 1;
for (let i = 0; i < dom.length; i++) {
if (dom[dom.length - i] == '[') {
indexof = i;
}
}
index = dom.substring(dom.length - indexof + 1, lastindexof);
elements = dom.substring(0, dom.length - indexof);
domelement = document.getElementsByName(elements)[index];
}
}
// 这个是如果传来的不是字符串 说明就是 你已经获取好的元素 就可以直接如返回
} else {
domelement = dom;
}
// 判断已经判断好的数据
if (domelement) {
// 返回数据
return domelement;
} else {
// 没有判断好则直接返回个报错
console.error(`未查找到元素 " ${dom} " 请正确输入`);
}
}
}
function getStyle(dom, attr) {
if (dom.currentStyle) {
return dom.currentStyle[attr];
} else {
return getComputedStyle(dom, false)[attr];
}
}
console.log();
展示一下怎么使用他
1.css 样式
.box{
width: 15rem;
height: auto;
overflow: hidden;
margin:50px auto;
}
.box_ban{
width: 100%;
height: 7rem;
}
.box_ban_box{
width: 100%;
height: 7rem;
}
.box_ban_box>div{
width: 15rem;
height: 7rem;
}
.box_ban_box>div>img{
width: 14rem;
height: 7rem;
border-radius: 12px;
display: block;
margin: 0 auto;
}
2.html结构
<div class="box">
<div class="box_ban">
<div class="box_ban_box">
<div>
<img src="img/11.jpg" >
</div>
<div>
<img src="img/15.jpg" >
</div>
<div>
<img src="img/17.jpg" >
</div>
<div>
<img src="img/18.jpg" >
</div>
<div>
<img src="img/19.jpg" >
</div>
<div>
<img src="img/20.jpg" >
</div>
<div>
<img src="img/23.jpg" >
</div>
<div>
<img src="img/24.jpg" >
</div>
</div>
<div class="box_ban_ban">
</div>
</div>
3.js实现
1.你可以把封装的代码放入一个文件里面,哪里使用哪里引入他就可以了
2.你也可以直接放到当前的script标签里面 但是代码量多,建议放到问价里面
<script src="./js.js"></script>
<script type="text/javascript">
// 大的容器 (移动元素的父亲)
new Banner('.box_ban',{
// 获取一下移动的元素
container: '.box_ban_box[0]',
// 这里是 分页的元素
pagination: {
tagname: '.box_ban_ban[0]',
// 分页器是否点击 (布尔值)
isclick: 'true'
},
seamless: {
// 是否无限轮播 (布尔值)
loop: 'true',
// 是否自动轮播 (布尔值)
isauto: 'true',
},
// 轮播的方向 (left / top) 默认为 left
direction: 'left',
});
</script>
提示:这里的操作跟 swiper 大致一样的.