基础轮播实现
轮播（Carousel/Slider）是 JS 特效的必修课：一组横向排列的幻灯片，点左右按钮切换。核心结构：视口容器（overflow:hidden）+ 轨道（display:flex，JS 改 translateX 移动）+ 每张幻灯片。
所有轮播样式千变万化，骨架就这一套：轨道整体平移 -index*width。记住 width 用百分比也没问题，但切换时用 transform 而非 left——性能好得多。
- 视口 overflow:hidden；轨道 flex 排列，translateX 整体平移
- 当前下标 index，位移 = -index * 100%
- 过渡用 transform + transition，不用 left
HTML
<style> #sl { max-width: 420px; margin: 20px auto; position: relative; } #sl .vp { overflow: hidden; border-radius: 12px; } #sl .track { display: flex; transition: transform .4s ease; } #sl .slide { min-width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; } #sl .s1 { background: linear-gradient(135deg,#4a9eff,#a371f7); } #sl .s2 { background: linear-gradient(135deg,#f778ba,#e5534b); } #sl .s3 { background: linear-gradient(135deg,#57ab5a,#39c5cf); } #sl .nav { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); } #sl .nav button { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); cursor: pointer; font-size: 16px; } </style> <div id="sl"> <div class="vp"><div class="track"> <div class="slide s1">第 1 张</div> <div class="slide s2">第 2 张</div> <div class="slide s3">第 3 张</div> </div></div> <div class="nav"><button id="prev">‹</button><button id="next">›</button></div> </div> <script> var track = document.querySelector('#sl .track'); var slides = track.children.length, i = 0; function go(n) { i = (n + slides) % slides; // 循环 track.style.transform = 'translateX(' + (-i * 100) + '%)'; } document.getElementById('prev').addEventListener('click', function () { go(i - 1); }); document.getElementById('next').addEventListener('click', function () { go(i + 1); }); </script>
本节要点轮播骨架：视口 hidden + flex 轨道 + translateX(-index*100%)；±1 按钮切换。
