<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
width: 800px;
height: 400px;
}
.focus {
padding: 0;
position: relative;
width: 800px;
height: 400px;
list-style: none;
}
.focus li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.focus li img {
width: 100%;
height: 100%;
}
.focus .active {
z-index: 111;
}
.btn {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.btn div {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
background-color: rgba(214, 54, 54, 0.11);
cursor: pointer;
z-index: 111111;
color: #fff;
font-size: 30px;
}
.doc {
position: absolute;
bottom: 0;
right: 40px;
z-index: 2222;
}
.doc div {
float: left;
width: 40px;
height: 40px;
border: 5px solid rgba(255, 255, 255, 0.637);
border-radius: 50%;
margin: 10px 10px;
background-position: center;
background-size: cover;
transition: all 0.7s;
}
.doc div:hover {
border: 5px solid rgba(0, 0, 0, 0.685);
transform: scale(1.1);
}
.doc div:nth-child(1) {
background-image: url("./images/10.jfif");
}
.doc div:nth-child(2) {
background-image: url("./images/7.jfif");
}
.doc div:nth-child(3) {
background-image: url("./images/8.jfif");
}
.doc .activeDoc {
border: 5px solid rgba(230, 22, 22, 0.685);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="banner">
<ul class="focus">
<li class="active">
<img src="./images/10.jfif" alt="" />
</li>
<li>
<img src="./images/7.jfif" alt="" />
</li>
<li>
<img src="./images/8.jfif" alt="" />
</li>
</ul>
<div class="doc">
<div class="activeDoc"></div>
<div></div>
<div></div>
</div>
<div class="btn">
<div class="left"><</div>
<div class="right">></div>
</div>
</div>
<script>
window.onload = () => {
let index = 0;
const focusLi = document.querySelectorAll(".focus li");
const docs = document.querySelectorAll(".doc div");
let timer;
function zIndex() {
focusLi.forEach((item) => {
item.className = "";
});
docs.forEach((item) => {
item.className = "";
});
focusLi[index].className = "active";
docs[index].className = "activeDoc";
}
function nest() {
if (index >= docs.length - 1) {
index = 0;
} else {
index++;
}
}
function desc() {
if (index < 1) {
index = docs.length - 1;
} else {
index--;
}
}
function setTime() {
timer = setInterval(() => {
index++;
desc();
nest();
zIndex();
}, 3000);
}
/* 左右点击事件 */
document.querySelector(".left").addEventListener("click", () => {
desc();
zIndex();
clearInterval(timer);
setTime();
});
document.querySelector(".right").addEventListener("click", () => {
nest();
zIndex();
clearInterval(timer);
setTime();
});
/* 小圆点点击事件 */
for (let i = 0; i < docs.length; i++) {
docs[i].addEventListener("click", () => {
index = i;
zIndex();
clearInterval(timer);
setTime();
});
}
setTime();
};
</script>
</body>
</html>
Gemeinsames Karussellbild 2 HTML+CSS+JS
Guess you like
Origin blog.csdn.net/m0_51531365/article/details/124048992
Recommended
Ranking