前言:无论什么样式的轮播图,核心 JS 实现原理都差不多。所以小伙伴们,还是需要了解一下核心 JS 实验原理的。
效果图:
实现代码:
<!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>
.carousel {
display: flex;
position: relative;
width: 705px;
margin: 50px auto;
overflow: hidden;
}
.carousel-box {
perspective: 1000px;
width: 100%;
height: 200px;
}
.carousel-item {
position: absolute;
left: calc(50% - 200px);
width: 400px;
height: 100%;
user-select: none;
transition: all 0.4s ease;
}
.indicator {
position: absolute;
top: calc(50% - 25px);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid;
z-index: 999;
border-radius: 50%;
font-size: 25px;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-box">
<img class="carousel-item" src="2.jpg" />
<img class="carousel-item" src="2.jpg" />
<img class="carousel-item" src="2.jpg" />
<img class="carousel-item" src="2.jpg" />
<img class="carousel-item" src="2.jpg" />
</div>
<div class="indicator prev"><</div>
<div class="indicator next">></div>
</div>
<script>
const items = document.querySelectorAll(".carousel-item"); // 拿到所有轮播图片
let index = 2; // 当前索引
// 布局函数
const layout = () => {
console.log(items, index);
const offsetStep = 100; // 两张图片的偏移量
const scaleStep = 0.6; // 两张图片的缩放比例
const opacityStep = 0.5; // 两张图片的透明度
for (let i = 0; i < items.length; i++) {
const item = items[i];
const dis = Math.abs(i - index); // 布局比例
const sign = i - index > 0 ? 1 : -1; // 布局方向
const zIndex = items.length - dis;
const scale = scaleStep ** dis;
let rotateY = 45 * -sign;
const opacity = opacityStep ** dis;
let xOffset = (i - index) * offsetStep;
if (i !== index) {
xOffset = xOffset + 100 * sign;
} else {
rotateY = 0;
}
item.style.zIndex = zIndex;
item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`;
item.style.opacity = opacity;
console.log(item);
}
};
layout();
// 向前的按钮
const prev = document.querySelector(".prev");
prev.onclick = () => {
index--;
if (index < 0) {
index = 0;
}
layout();
};
// 向后的按钮
const next = document.querySelector(".next");
next.onclick = () => {
index++;
if (index > items.length - 1) {
index = items.length - 1;
}
layout();
};
// 点轮播图
items.forEach((item, i) => {
item.onclick = () => {
index = i;
layout();
};
});
</script>
</body>
</html>