（创建页面，内容为“(async () => { $('.lboutbox').each((index, ele) => { const outbox = $(ele) const inbox = outbox[0].children[0] const inboxChild = inbox.children const circle = outbox[0].children[1].children const left = outbox[0].children[2].children[0] const right = outbox[0].children[2].children[1] const width = parseInt(getComputedStyle(outbox[0], null).width) const height = parseInt(getComputedStyle(outbox[0], null).height) const unitW…”） |
（清空全部内容） 标签：清空 |
||
| 第1行： | 第1行： | ||
(async () => { |
|||
$('.lboutbox').each((index, ele) => { |
|||
const outbox = $(ele) |
|||
const inbox = outbox[0].children[0] |
|||
const inboxChild = inbox.children |
|||
const circle = outbox[0].children[1].children |
|||
const left = outbox[0].children[2].children[0] |
|||
const right = outbox[0].children[2].children[1] |
|||
const width = parseInt(getComputedStyle(outbox[0], null).width) |
|||
const height = parseInt(getComputedStyle(outbox[0], null).height) |
|||
const unitW = getComputedStyle(outbox[0], null).width.replace( |
|||
/[^a-zA-Z]/g, |
|||
'' |
|||
) |
|||
const unitH = getComputedStyle(outbox[0], null).height.replace( |
|||
/[^a-zA-Z]/g, |
|||
'' |
|||
) |
|||
const lbminute = outbox[0].dataset.lbminute |
|||
const lbcircleColor = circle[0].dataset.circleColor |
|||
const lbcircleHover = circle[0].dataset.circleHover |
|||
let lbtime = null |
|||
let lbnum = 0 |
|||
console.log(left) |
|||
console.log(inbox) |
|||
if (lbcircleHover) { |
|||
circle[0].className = `lbhoverNew${index} lbcircleChild` |
|||
let style = document.createElement('style') |
|||
style.type = 'text/css' |
|||
style.innerHTML = ` |
|||
.lbhoverNew${index}{ |
|||
background-color:${lbcircleHover}!important; |
|||
} |
|||
` |
|||
document.querySelector('head').appendChild(style) |
|||
} |
|||
for (let x = 0; x < inboxChild.length; x++) { |
|||
inboxChild[x].style.width = `${width}${unitW}` |
|||
inboxChild[x].style.height = `${height}${unitH}` |
|||
} |
|||
for (let i = 0; i < circle.length; i++) { |
|||
circle[i].onclick = () => { |
|||
inbox.style.left = `-${width * i}${unitW}` |
|||
addhover(i) |
|||
} |
|||
circle[i].style.backgroundColor = lbcircleColor |
|||
} |
|||
outbox[0].onmouseleave = () => { |
|||
for (let j = 0; j < circle.length; j++) { |
|||
if ( |
|||
circle[j].className === 'lbhover lbcircleChild' || |
|||
circle[j].className === `lbhoverNew${index} lbcircleChild` |
|||
) { |
|||
lbnum = j |
|||
timestart(j, circle.length) |
|||
} |
|||
} |
|||
} |
|||
outbox[0].onmouseenter = () => { |
|||
for (let j = 0; j < circle.length; j++) { |
|||
if ( |
|||
circle[j].className === 'lbhover lbcircleChild' || |
|||
circle[j].className === `lbhoverNew${index} lbcircleChild` |
|||
) { |
|||
lbnum = j |
|||
} |
|||
} |
|||
timeclear() |
|||
} |
|||
function addhover(circleindex) { |
|||
for (let i = 0; i < circle.length; i++) { |
|||
circle[i].className = 'lbcircleChild' |
|||
} |
|||
if (lbcircleHover) { |
|||
circle[circleindex].className = `lbhoverNew${index} lbcircleChild` |
|||
} else { |
|||
circle[circleindex].className = 'lbhover lbcircleChild' |
|||
} |
|||
} |
|||
function timestart(m, n = circle.length) { |
|||
let i = m || 0 |
|||
lbtime = setInterval(() => { |
|||
inbox.style.left = `-${width * i}${unitW}` |
|||
addhover(i) |
|||
if (i === n - 1) { |
|||
i = 0 |
|||
} else { |
|||
i++ |
|||
} |
|||
}, lbminute || 3000) |
|||
} |
|||
function timeclear() { |
|||
clearInterval(lbtime) |
|||
} |
|||
right.onclick = function () { |
|||
if (lbnum === circle.length - 1) { |
|||
addhover(0) |
|||
inbox.style.left = `0${unitW}` |
|||
lbnum = 0 |
|||
} else { |
|||
addhover(lbnum + 1) |
|||
inbox.style.left = `-${width * (lbnum + 1)}${unitW}` |
|||
lbnum++ |
|||
} |
|||
} |
|||
left.onclick = function () { |
|||
if (lbnum === 0) { |
|||
addhover(circle.length - 1) |
|||
inbox.style.left = `-${width * (circle.length - 1)}${unitW}` |
|||
lbnum = circle.length - 1 |
|||
} else { |
|||
addhover(lbnum - 1) |
|||
inbox.style.left = `-${width * (lbnum - 1)}${unitW}` |
|||
lbnum-- |
|||
} |
|||
} |
|||
timestart() |
|||
}) |
|||
})() |
|||