轮播图
轮播图里面的知识点还是很多的,分享出来大家一起交流！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./global.css">
<style>
.container {
width: 600px;
height: 600px;
border: 1px solid;
background-image: url("../DOM/img/1.jpg") no-repeat;
background-size: 600px 600px;
position: relative;
}
ul,
ol {
padding: 0;
list-style: none;
display: flex;
}
ul {
width: 100%;
box-sizing: border-box;
justify-content: space-between;
padding: 0 10px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
ul>li {
width: 49px;
height: 49px;
background: url("../轮播图/img/shutter_prevBtn.png");
}
ul>li:nth-child(2) {
transform: rotate(180deg);
}
ul>li:hover {
background-position: 0 -49px;
}
ol {
width: 20%;
justify-content: space-around;
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
}
ol>li {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.6);
}
.bgWhite {
background-color:orangered;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li class="bgWhite"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
let imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"];
let i = 0, len = imgArr.length;
let container = document.querySelector(".container");
let rignt_btn = document.querySelector(".container>ul>li:last-child");
let left_btn = document.querySelector(".container>ul>li:first-child");
let circles = document.querySelectorAll(".container>ol>li");
// 正放
function running() {
i++;
if (i > len - 1) {
i = 0;
}
container.style.backgroundImage = `url("../轮播图/img/${imgArr[i]}")`;
renderCircle();
}
let timer = setInterval(running, 500);
// 移入停止
container.onmouseenter = function () {
clearInterval(timer);
}
// 移出继续
container.onmouseleave = function () {
timer = setInterval(running, 500);
}
// 下一页
rignt_btn.onclick = function () {
running();
}
// 上一页
left_btn.onclick = function () {
backward();
}
// 倒放
function backward() {
i--;
if (i < 0) {
i = len - 1;
}
container.style.backgroundImage = `url("../轮播图/img/img/${imgArr[i]}")`;
// 重新渲染 circle
renderCircle();
}
// 圆点渲染
function renderCircle() {
for (let item of circles) {
item.className = "";
}
circles[i].className = "bgWhite";
}
// 点击圆点
circles.forEach((item, index) => {
item.onclick = function () {
// console.log(index);
i = index;
i--;
running();
}
});
</script>
</body>
</html>
