前言：無論什么樣式的輪播圖，核心 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>?
![uni-app項目在微信開發者工具打開時報錯[ app.json 文件內容錯誤] app.json: 在項目根目錄未找到 app.json](http://pic.xiahunao.cn/uni-app項目在微信開發者工具打開時報錯[ app.json 文件內容錯誤] app.json: 在項目根目錄未找到 app.json)
