<!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>轮播图</title>
<style>
* {
padding: 0;
margin: 0;
overflow: hidden;
}
#banner {
position: relative;
width: 520px;
height: 280px;
margin: 10px auto;
}
.img-wrap {
position: absolute;
width: 2600px;
left: 0;
transition: 1s;
height: 280px;
/*弹性魔盒自适应对齐*/
display: flex;
}
.item {
width: 520px;
height: 280px;
}
img {
width: 520px;
height: 280px;
}
.btn-list {
position: absolute;
width: 100px;
height: 10px;
left: 210px;
bottom: 10px;
}
.btn {
width: 10px;
height: 10px;
background: #eee;
float: left;
/*圆形*/
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.active {
background: #FF5000;
}
</style>
</head>
<body>
<div id="banner">
<div class="img-wrap">
<div class="item"><img src="img/1.jpg" /></div>
<div class="item"><img src="img/2.jpg" /></div>
<div class="item"><img src="img/1.jpg" /></div>
<div class="item"><img src="img/2.jpg" /></div>
<div class="item"><img src="img/1.jpg" /></div>
</div>
<div class="btn-list">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>
</body>
<script>
var oBtn = document.querySelectorAll(".btn");
var imgWrap = document.querySelector('.img-wrap');
for (i = 0; i < oBtn.length; i++) {
oBtn[i].id = i;
oBtn[i].onclick = function() {
for (var j = 0; j < oBtn.length; j++) {
oBtn[j].classList.remove('active');
this.classList.add("active");
}
imgWrap.style.left = this.id * (-520) + 'px';
}
}
</script>
</html>