淡入淡出轮播
淡入淡出轮播：幻灯片不做横向位移，而是 opacity 交叉切换（所有幻灯片叠在一起，当前一张 opacity:1，其余 0）。适合全屏 Banner、焦点图，比滑动更有“幕布感”。
实现要点：容器 position:relative，所有 slide absolute 叠放；JS 切换时用 CSS transition（opacity .5s）自动产生淡入；z-index 或 pointer-events 防止底层挡住点击。
- 所有幻灯片 absolute 堆叠，JS 只 toggle .active 类
- 透明度交叉过渡（opacity .5s ease）产生“幕布感”
- 别忘了 pointer-events:none 排除非显示层的点击
HTML
<style> #fade { position: relative; max-width: 420px; height: 180px; margin: 20px auto; border-radius: 12px; overflow: hidden; } #fade .slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; opacity: 0; transition: opacity .6s ease; pointer-events: none; } #fade .slide.on { opacity: 1; pointer-events: auto; } #fade .b1 { background: linear-gradient(135deg,#4a9eff,#39c5cf); } #fade .b2 { background: linear-gradient(135deg,#a371f7,#f778ba); } #fade .b3 { background: linear-gradient(135deg,#e78a3e,#e5534b); } </style> <div id="fade"> <div class="slide b1 on">第一幕</div> <div class="slide b2">第二幕</div> <div class="slide b3">第三幕</div> </div> <script> var slides = document.querySelectorAll('#fade .slide'); var i = 0, n = slides.length; setInterval(function () { slides[i].classList.remove('on'); i = (i + 1) % n; slides[i].classList.add('on'); }, 2000); </script>
本节要点淡入轮播 = 幻灯片叠放 + opacity 交叉过渡；active 类切换唯一状态。
