<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
a {
text-decoration: none;
font-size: 30px;
display: none;
z-index: 2;
}
a:nth-child(1) {
position: absolute;
left: 0px;
top: 27px;
}
a:nth-child(2) {
position: absolute;
right: 0px;
top: 27px;
}
ul {
margin: 0;
padding: 0;
}
.focus {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
ul {
position: absolute;
top: 0px;
left: 0px;
width: 400%;
}
ul li {
float: left;
list-style: none;
width: 300px;
height: 100px;
}
ul li:nth-child(1) {
background-color: pink;
}
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(3) {
background-color: purple;
}
ul li:nth-child(4) {
background-color: pink;
}
ol {
position: absolute;
left: 106px;
bottom: 11px;
margin: 0;
padding: 0;
}
ol li {
float: left;
list-style: none;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #000;
margin-left: 5px;
cursor: pointer;
}
.current {
background-color: #fff;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="focus">
<a href=""><</a>
<a href="">></a>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
</ol>
</div>
<script>
let focus = document.querySelector('.focus')
let left = document.querySelectorAll('a')[0]
let right = document.querySelectorAll('a')[1]
let items = document.querySelectorAll('ul li')
let ol = document.querySelector('ol')
ul = document.querySelector('ul')
function animate (element, target, callback) {
clearInterval(element.timer)
element.timer = setInterval(() => {
if (element.offsetLeft == target) {
clearInterval(element.timer)
callback && callback()
}
let cur_distance = (target - element.offsetLeft) > 0 ? Math.ceil((target - element.offsetLeft) / 10) : Math.floor((target - element.offsetLeft) / 10)
element.style.left = element.offsetLeft + cur_distance + 'px'
}, 15)
}
for (let i = 0; i < items.length; i++) {
let li = document.createElement('li')
li.setAttribute('index', i)
ol.append(li)
}
ol.children[0].className = 'current'
focus.addEventListener('mouseenter', () => {
left.style.display = 'block'
right.style.display = 'block'
clearInterval(timer)
timer = null
})
focus.addEventListener('mouseleave', () => {
left.style.display = 'none'
right.style.display = 'none'
timer = setInterval(() => {
right.click()
}, 2000)
})
ol.addEventListener('click', (e) => {
if (e.target.tagName === 'OL') return
for (let k of ol.children) {
k.className = ''
}
e.target.className = 'current'
let focusWidth = focus.offsetWidth
let target = -focusWidth * parseInt(e.target.getAttribute('index'))
cur_index = parseInt(e.target.getAttribute('index'))
circle = parseInt(e.target.getAttribute('index'))
animate(ul, target)
})
let first = ul.children[0].cloneNode(true)
ul.append(first)
let cur_index = 0
let circle = 0
let flag = true
right.addEventListener('click', (e) => {
e.preventDefault()
if (flag) {
flag = false
if (cur_index === 3) {
ul.style.left = '0px'
cur_index = 0
}
cur_index += 1
animate(ul, -cur_index * focus.offsetWidth, function () {flag = true})
circle += 1
if (circle == 3) {
circle = 0
}
for (let k of ol.children) {
k.className = ''
}
ol.children[circle].className = 'current'
}
})
left.addEventListener('click', (e) => {
e.preventDefault()
if (cur_index === 0) {
ul.style.left = '-900px'
cur_index = 3
}
cur_index -= 1
animate(ul, -cur_index * focus.offsetWidth)
circle -= 1
if (circle == -1) {
circle = 2
}
for (let k of ol.children) {
k.className = ''
}
ol.children[circle].className = 'current'
})
let timer = setInterval(() => {
right.click()
}, 2000)
</script>
</body>
</html>
|
