<!DOCTYPE html>
<html lang="en">
<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>
.wrap {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
}
.uls {
width: 800px;
height: 400px;
list-style: none;
position: relative;
padding-left: 0px;
}
.lis {
width: 100%;
height: 100%;
position: absolute;
color: white;
font-size: 50px;
opacity: 0;
transition: all .8s;
}
.lis:nth-child(1) {
background-image: url(./image/7.jpg);
background-repeat: no-repeat;
width: 800px;
height: 400px;
}
.lis:nth-child(2) {
background-image: url(./image/8.jpg);
background-repeat: no-repeat;
width: 800px;
height: 400px;
}
.lis:nth-child(3) {
background-image: url(./image/9.jpg);
background-repeat: no-repeat;
width: 800px;
height: 400px;
}
.lis:nth-child(4) {
background-image: url(./image/10.jpg);
background-repeat: no-repeat;
width: 800px;
height: 400px;
}
.lis:nth-child(5) {
background-image: url(./image/11.jpg);
background-repeat: no-repeat;
width: 800px;
height: 400px;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 150px;
z-index: 100;
}
#pre {
left: 0px;
}
#next {
right: 0px;
}
.lis.active {
opacity: 1;
z-index: 10;
}
.dian {
list-style: none;
padding-left: 0;
position: absolute;
right: 20px;
bottom: 10px;
z-index: 1000;
}
.dians {
width: 10px;
height: 10px;
border-radius: 100%;
float: left;
margin-left: 14px;
background-color: slategrey;
border: solid white 2px;
}
.dians.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="uls">
<li class="lis active">0</li>
<li class="lis">1</li>
<li class="lis">2</li>
<li class="lis">3</li>
<li class="lis">4</li>
</ul>
<ul class="dian">
<li class="dians active" data-index="0"></li>
<li class="dians" data-index="1"></li>
<li class="dians" data-index="2"></li>
<li class="dians" data-index="3"></li>
<li class="dians" data-index="4"></li>
</ul>
<button type="button" class="btn" id="pre">《</button>
<button type="button" class="btn" id="next">》</button>
</div>
</body>
<script>
var lis = document.getElementsByClassName('lis');//图片
var dians = document.getElementsByClassName('dians');//点
var goprebtn = document.getElementById('pre');//上一页按钮
var gonextbtn = document.getElementById('next');//下一页按钮
var index = 0
//清除图片class里面的名字
var clearactive = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = 'lis';
}
for (var i = 0; i < dians.length; i++) {
dians[i].className = 'dians';
}
}
//给class 添加 active
var goindex = function () {
clearactive()
dians[index].className = 'dians active';
lis[index].className = 'lis active';
}
//判断页数
var gonext = function () {
if (index < 4) {
index++;
} else {
index = 0;
}
goindex();
}
var gopre = function () {
if (index == 0) {
index = 4;
} else {
index--;
}
goindex();
}
//监听事件
gonextbtn.addEventListener('click', function () {
gonext();
time = 0;
})
goprebtn.addEventListener('click', function () {
gopre();
time = 0;
})
for (var i = 0; i < dians.length; i++) {
dians[i].addEventListener('click', function () {
var dianss = this.getAttribute('data-index');
index = dianss;
goindex();
time = 0;
})
}
//定时器
var time = 0;
setInterval(function () {
time++;
if (time == 20) {
gonext();
time = 0;
}
}, 100)
</script>
</html>
js原生轮播图通过隐藏现实z-index实现