淘宝Swiper小图变大图效果实现
淘宝的商品轮播图设计里，Swiper 的小图变大图效果蛮实用的，适合那种需要在滑动中放大展示商品细节的场景。你可以用它来做那种“点一下或者滑到这张图就变大，其他图还保持原样”的交互，用户体验挺顺畅的。
Swiper 插件本身就比较强大，响应也快，配置项也多，关键是手机、平板、PC 都能跑。这种效果基本就是靠CSS3 的 transform来搞缩放，再配合slideChangeTransitionStart和slideChangeTransitionEnd两个事件去状态切换，逻辑清晰，控制也方便。
CSS 那边主要做几件事：小图一开始就用transform: scale(0.8)，当前激活的图缩放到scale(1)，再加个z-index拉到最上面，视觉效果就出来了。别忘了加transition让缩放更柔和，看着舒服。
JS 逻辑也不复杂，监听当前swiper.activeIndex，把激活图加个类，比如active，再让其他图移除这个类。配合 CSS 控制缩放，互动感就出来了。你可以把主要代码写在swiper.on('slideChangeTransitionStart')里，简洁高效。
结构上，一般放在index.html里页面框架，css/style.css管样式，图片放images/，脚本放js/，基本就是这种老四样布局，维护起来也挺顺。
还有，图片建议加个懒加载，不然一下子加载太多图影响首屏速度。你也可以试试硬件加速，比如给图片加个will-change: transform，滑动更流畅。
如果你还没玩过类似效果，可以看看这个例子练练手，逻辑清楚、样式直观，做展示页、商品页都挺合适。
文件大小：1.04MB
评论区