菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-张悕可-20230523 [打印本页]

作者: 小胖 时间: 2023-5-24 17:39
标题: 前端-张悕可-20230523
let imgData = [
  { id: 1, src: 'imgs/01.jpg', title: '这是文字' },
  { id: 2, src: 'imgs/02.jpg', title: '这是文字' },
  { id: 3, src: 'imgs/03.jpg', title: '这是文字' },
  { id: 4, src: 'imgs/04.png', title: '这是文字' },
  { id: 5, src: 'imgs/05.png', title: '这是文字' },
]

// 1.创建ul中li和ol中li
const box = document.querySelector('.box')
box.style.overflow = 'hidden'
const ul = box.querySelector('ul')
const ol = box.querySelector('ol')
let imgStr = ''
imgData.forEach(item => {
  imgStr += `
<li>
   <a href="javascript:;"><img src="${item.src}" alt=""></a>
</li>
  `
})
ul.innerHTML = imgStr
let circleStr = ''
imgData.forEach(item => {
  circleStr += `
<li><a href="javascript:;"></a></li>
  `
})
ol.innerHTML = circleStr

// 2.鼠标移入箭头显示，离开箭头隐藏
const prev = box.children[2]
const next = box.children[3]

// 3.点击右箭头图片正向切换
const circle = [...ol.children]
circle[0].classList.add('current')
const imgWidth = document.querySelector('ul li img').offsetWidth
let num = 0
let temp = 0
let flag = true
ul.appendChild(ul.children[0].cloneNode(true))
next.addEventListener('click', () => {
  if (flag) {
flag = false
if (num == ul.children.length - 1) {
   ul.style.left = 0
   num = 0
}
num++
temp++
if (temp == circle.length) {
   temp = 0
}
animate(ul, -num * imgWidth, function () {
   flag = true
})
document.querySelector('ol li.current').classList.remove('current')
circle[temp].classList.add('current')
  }
})

// 4.点击左箭头图片方向切换
prev.addEventListener('click', () => {
  if (flag) {
flag = false
if (num == 0) {
   num = ul.children.length - 1
   ul.style.left = -num * imgWidth + 'px'
}
num--
animate(ul, -num * imgWidth, function () {
   flag = true
})
if (temp == 0) {
   temp = circle.length
}
temp--
document.querySelector('ol li.current').classList.remove('current')
circle[temp].classList.add('current')
  }
})

// 5.点击小圆点切换图片，改变当前小圆点样式
circle.forEach((item, index) => {
  item.style.cursor = 'pointer'
  item.addEventListener('click', () => {
document.querySelector('ol li.current').classList.remove('current')
item.classList.add('current')
temp = index
num = index
animate(ul, -temp * imgWidth)
  })
})

// 6.自动播放
let timer = setInterval(() => {
  next.click()
}, 2000)

box.addEventListener('mouseenter', () => {
  prev.style.display = 'block'
  next.style.display = 'block'
  clearInterval(timer)
  timer = null
})
box.addEventListener('mouseleave', () => {
  prev.style.display = 'none'
  next.style.display = 'none'
  timer = setInterval(() => {
next.click()
  }, 2000)
})

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)