前端 CSS 经典：3D 渐变轮播图

前言：无论什么样式的轮播图，核心 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/13792.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！