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