6666666
html:
<body>
<div class="carousel">
<div class="carousel-list">
<img class="carousel-item" src="./img/01.png" alt="">
<img class="carousel-item" src="./img/02.png" alt="" >
<img class="carousel-item" src="./img/03.png" alt="" >
<img class="carousel-item" src="./img/04.png" alt="" >
<img class="carousel-item" src="./img/05.png" alt="" >
</div>
</div>
<div class="prev">左<<<</div>
<div class="next">右>>></div>
<script src="./js/index.js"></script>
</body>
css
.carousel {
width: 100%;
height: 60vh;
/* background-color: aqua; */
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
position: relative;
}
.carousel-list {
width: 30%;
height: 100%;
/* background-color: red; */
position: relative;
}
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.prev {
width: 4vw;
height: 4vw;
border: 1px solid #ccc;
background-color: #936464;
position: absolute;
top: 30%;
left: 10%;
}
.next {
width: 4vw;
height: 4vw;
border: 1px solid #ccc;
background-color: #936464;
position: absolute;
top: 30%;
right: 10%;
}
.prev:hover {
background-color: #21e204;
cursor: pointer;
}
.next:hover {
background-color: #21e204;
cursor: pointer;
}
js
const items = document.querySelectorAll(".carousel-item");
let index = 0;
function layout() {
const xOffsetStep = 100; // 设置每个轮播图之间的间隔
const count = items.length;
const scaleStep = 0.6;
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 判断符号(左右)
const sign = Math.sign(i - index);
const opacityStep = 0.5;
// 设置
// transform
// translateX scale rotateY
// opacity
// z-index
let xoffset = (i - index) * xOffsetStep;
if (i !== index) {
xoffset = xoffset + 240 * sign;
}
const scale = scaleStep ** Math.abs(i - index);
const rotateY = i === index ? 0 : 45 * sign;
item.style.transform = `translateX(${xoffset}px) scale(${scale}) rotateY(${rotateY}deg) perspective(60vw)`;
const opacity = opacityStep ** Math.abs(i - index);
item.style.opacity = opacity;
item.style.zIndex = count - Math.abs(index - i);
}
}
layout();
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
prev.addEventListener("click", () => {
index--;
if (index < 0) {
index = items.length - 1;
}
layout();
});
next.addEventListener("click", () => {
index++;
if (index > items.length - 1) {
index = 0;
}
layout();
});
items.forEach((item, i) => {
item.addEventListener("click", () => {
index = i;
layout();
});
});
setTimeout(() => {
index++;
if (index > items.length - 1) {
index = 0;
}
layout();
}, 3000);
效果