<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
bottom: 0;
}
#banner {
overflow: hidden;
width: 1000px;
height: 800px;
background: url("./picture/bg.jpg");
margin: 0 auto;
position: relative;
}
#img {
width: 200%;
height: 200%;
}
#img li {
width: 100%;
height: 100%;
position: absolute;
left: 250px;
top: 150px;
}
.item {
opacity: 0;
transition: all .5s;
}
#dot {
padding-left: 0px;
position: absolute;
right: 415px;
bottom: 300px;
z-index: 1000;
}
.point {
width: 8px;
height: 8px;
background: rgba(0, 0, 0, 0.4);
border-radius: 100%;
float: left;
margin-right: 13px;
border: 1px solid rgba(0, 0, 0, 0.6);
cursor: pointer;
}
#prev {
left: 250px;
}
#next {
left: 736px;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 270px;
z-index: 100;
opacity: 0.7;
cursor: pointer;
}
.item.active {
z-index: 10;
opacity: 1;
}
.point.active {
background: white;
}
</style>
</head>
<body>
<div id="banner">
<ul id="img">
<li class="item active"><img src="./picture/img1.jpg"></li>
<li class="item"><img src="./picture/img2.jpg"></li>
<li class="item"><img src="./picture/img3.jpg"></li>
<li class="item"><img src="./picture/img4.jpg"></li>
<li class="item"><img src="./picture/img5.jpg"></li>
</ul>
<ul id="dot">
<li class="point active" data-index="0"></li>
<li class="point" data-index='1'></li>
<li class="point" data-index='2'></li>
<li class="point" data-index='3'></li>
<li class="point" data-index='4'></li>
</ul>
<button id="prev" class="btn"><img src="./images/ar.png"></button>
<button id="next" class="btn"><img src="./images/ar2.png"></button>
</div>
<script>
let items = document.getElementsByClassName('item');
let prev = document.getElementById("prev");
let next = document.getElementById("next");
let points = document.getElementsByClassName('point');
let index = 0; //表示第几张图片在展示和第几个点，第index张照片有active这个类名
// 清除classname
let clearActer = function() {
for (let i = 0; i < items.length; i++) {
items[i].className = 'item';
points[i].className = 'point'
}
}
// 改变classname实现改变
let goIndex = function() {
clearActer();
items[index].className = 'item active';
points[index].className = 'point active'
}
// 下一张按钮
let goNext = function() {
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
// 上一张按钮
let goPre = function() {
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
// next点击句柄
next.addEventListener("click", function() {
goNext();
})
// prev点击句柄
prev.addEventListener("click", function() {
goPre();
})
// 点击点改变图片
for (let i = 0; i < points.length; i++) {
points[i].addEventListener("click", function() {
let poitIndex = this.getAttribute('data-index');
index = poitIndex;
goIndex();
})
}
// 自动轮播定时器
window.onload = function() {
setInterval(goNext, 2000);
}
</script>
</body>
</html>
4386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
