如何用JS做出带翻转效果的炫酷焦点图？

哎，你是不是经常在购物网站看到那种自动切换的大图广告？图片不仅会左右滑动，还能像翻书一样上下翻转？今天咱们就来拆解这个看似高大上的特效！别慌，就算你刚接触前端，跟着我做保证能搞懂👇

🛠️ 先搭个架子

先来写最基础的HTML结构。记住，好的结构是特效成功的一半！

“`html

“`

重点注意： 1. 外层容器用position:relative 2. 图片包裹层要用transform-style: preserve-3d（后面翻转特效的关键！） 3. 小圆点用eventListener绑定点击事件

🎨 画龙点睛的CSS

“`css .slider-container { width: 800px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; / 隐藏溢出部分 / }

.slider-wrap { position: absolute; width: 100%; height: 100%; transition: transform 0.6s ease-in-out; / 切换动画 / }

.slide-item { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; / 隐藏背面 / transform-style: preserve-3d; / 3D变换 / }

/ 当前显示的图片 / .slide-item.active { z-index: 2; } “`

🤖 让图片自己动起来

🕒 定时器切换基础版

“`javascript let currentIndex = 0; const slides = document.querySelectorAll(‘.slide-item’); const total = slides.length;

setInterval(() => { // 先隐藏当前 slides[currentIndex].classList.remove(‘active’);

// 计算下一张 currentIndex = (currentIndex + 1) % total;

// 显示新图片 slides[currentIndex].classList.add(‘active’); }, 3000); “`

🔄 加上翻转动画

重点来了！怎么实现翻牌效果？

“`javascript function flipSlide(nextIndex) { const currentSlide = slides[currentIndex]; const nextSlide = slides[nextIndex];

// 先旋转90度隐藏当前 currentSlide.style.transform = ‘rotateX(-90deg)’;

// 下一张从90度转回来 nextSlide.style.transform = ‘rotateX(0deg)’;

// 更新激活状态 currentSlide.classList.remove(‘active’); nextSlide.classList.add(‘active’);

currentIndex = nextIndex; } “`

这里有个坑要注意

：

💡 常见问题急救箱

Q：图片切换时为什么会有闪烁？

A：检查CSS有没有写backface-visibility: hidden，这个属性能防止元素背面可见

Q：小圆点导航怎么同步？

A：给每个圆点绑定点击事件，用dataset记录索引值： javascript dots.forEach((dot, index) => { dot.addEventListener(‘click’, () => { flipSlide(index); }); });

Q：手机滑动没反应？

A：加上触摸事件监听： “`javascript let startX = 0; slider.addEventListener(‘touchstart’, e => { startX = e.touches[0].clientX; });

slider.addEventListener(‘touchend’, e => { const diff = startX – e.changedTouches[0].clientX; if(Math.abs(diff) > 50) { diff > 0 ? flipNext() : flipPrev(); } }); “`

🚀 小编的私房优化技巧

最后说句掏心窝的，现在很多项目直接用现成的轮子库（比如Swiper.js）确实更方便。但咱们自己手写一遍，才能真正理解原理不是吗？下次面试被问到轮播图实现，你绝对能侃侃而谈啦！