自己编写的轮播图移动端和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 大致一样的.
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
