<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.banner {
position: relative;
width: 500px;
height: 400px;
margin: 20px auto;
overflow: hidden;
background-color: #f00;
}
.banner ul {
width: 2500px;
height: 400px;
display: flex;
position: absolute;
}
.banner ul li {
width: 500px;
text-align: center;
line-height: 400px;
font-size: 50px;
}
.banner ul li img {
width: 100%;
height: 100%;
}
span {
width: 30px;
height: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, .5);
text-align: center;
color: #fff;
line-height: 30px;
}
.next {
right: 0;
}
ol {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
bottom: 10px;
}
ol li {
width: 20px;
height: 20px;
background-color: #ff0;
margin: 10px;
}
.active {
background-color: #0f0;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/1.jpg" alt=""></li>
</ul>
<span class="prev"><</span>
<span class="next">></span>
<ol>
<li class="active" id="li"></li>
<li id="li"></li>
<li id="li"></li>
<li id="li"></li>
</ol>
</div>
<script>
var obanner = document.querySelector('.banner')
var oprev = document.querySelector('.prev')
var onext = document.querySelector('.next')
var oactive = document.querySelector('.active')
var oul = document.querySelector('ul')
var oulli = document.querySelectorAll('ul li')
console.log(oulli)
console.log(oulli.length)
var oolli = document.querySelectorAll('ol li')
var index = 0
var t
var liX = oulli[0].offsetWidth
console.log(liX)
oolli.forEach(function (val, i) {
val.index = i
})
var flag = true
window.onblur = function () {
clearInterval(t)
}
window.onfocus = function () {
autoPlay()
}
//自动播放
autoPlay()
obanner.onclick = function (e) {
var e = e || event
var target = e.target || e.srcElement
if (flag) {
if (target.className == 'next') {
clearInterval(t)
//判断是不是最后一张
if (index == oulli.length - 1) {
index = 0
oul.style.left = 0
}
index++
move(-liX * index, 30, oul, 'left')
active()
}
}
if (flag) {
if (target.className == 'prev') {
//先判断是不是最后一张
clearInterval(t)
if (index == 0) {
index = oulli.length - 1
oul.style.left = -liX * index + 'px'
}
index--
move(-liX * index, 30, oul, 'left')
active()
}
}
if (flag) {
if (target.id == 'li') {
clearInterval(t)
index = target.index
move(-liX * index, 30, oul, 'left')
active()
if (target.id == 'li') {
return false
}
}
}
}
function autoPlay() {
clearInterval(t)
t = setInterval(function () {
index++
move(-liX * index, 30, oul, 'left', function () {
if (index == oulli.length - 1) { //4
console.log(6666666)
index = 0
oul.style.left = 0
}
})
active()
}, 2000)
}
function active() {
oolli.forEach(function (val) {
val.classList.remove('active')
})
if (index == oulli.length - 1) {
oolli[0].classList.add('active')
} else {
oolli[index].classList.add('active')
}
}
function move(end, speed, ele, attr, fb) {
var sta = parseInt(getStyle(ele, attr))
var speed = end > sta ? speed : -speed
clearInterval(t)
var t = setInterval(function () {
flag = false
sta += speed
ele.style[attr] = sta + 'px'
if (Math.abs(end - sta) < Math.abs(speed)) {
sta = end
ele.style[attr] = sta + 'px'
clearInterval(t)
flag = true
if (fb) {
fb()
}
}
}, 30)
}
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return getComputedStyle(ele)[attr]
} else {
return ele.currentStyle[attr]
}
}
</script>
</body>
</html>
