User:顶呱呱的阿杰/swiper.js

(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()
  })
})()