轮播组件设计思路
写完前面三节，你已经掌握轮播的全部基本件。一个可维护的轮播组件应具备：状态变量（index）、渲染函数（go）、事件绑定（按钮/圆点/触摸）、自动播放与暂停、边界处理。把这些装进一个函数作用域就是组件雏形。
轮子还是选库：需要复杂手势、loop 无缝、虚拟滑动时用 Swiper（Web/小程序通吃）；React 项目用 embla-carousel（轻量现代）；简单需求 30 行原生代码足够。
- 组件化：状态 + render + 事件 + 自动播放 四要素
- Swiper：功能最全，App/小程序/Web 通用的行业标准
- embla-carousel：轻量现代，React/Vue 生态首选
HTML
<style> #mini { max-width: 420px; margin: 20px auto; overflow: hidden; border-radius: 12px; } #mini .track { display: flex; transition: transform .4s ease; } #mini .slide { min-width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; } #mini .m1 { background: #a371f7; } #mini .m2 { background: #39c5cf; } #mini .m3 { background: #e78a3e; } #mini .bar { display: flex; gap: 6px; padding: 10px; justify-content: center; } #mini .bar i { width: 22px; height: 4px; border-radius: 2px; background: #ddd; transition: .2s; } #mini .bar i.on { background: #a371f7; } </style> <div id="mini"><div class="track"> <div class="slide m1">组件化轮播 1</div> <div class="slide m2">组件化轮播 2</div> <div class="slide m3">组件化轮播 3</div> </div><div class="bar"><i class="on"></i><i></i><i></i></div></div> <script> function carousel(el, gap) { var track = el.querySelector('.track'), bar = el.querySelectorAll('.bar i'); var n = track.children.length, i = 0, timer = null; function go(k) { i = (k + n) % n; track.style.transform = 'translateX(' + (-i * 100) + '%)'; bar.forEach(function (b, bi) { b.classList.toggle('on', bi === i); }); } function play() { clearInterval(timer); timer = setInterval(function () { go(i + 1); }, gap); } el.addEventListener('mouseenter', function () { clearInterval(timer); }); el.addEventListener('mouseleave', play); bar.forEach(function (b, bi) { b.addEventListener('click', function () { go(bi); play(); }); }); play(); } carousel(document.getElementById('mini'), 2000); </script>
本节要点轮播组件四要素：状态、渲染、事件、自动播放；复杂场景上 Swiper/embla。
