swiper
@H_ 404 _6@Swiper 常用于移动端网站的 内容 触摸滑动
Swiper 是纯 JavaScript 打造的滑动特效 插件 ，面向手机、平板电脑等移动终端。@H_ 404 _6@ swiper.js 在国内使用面非常广，可以用于实现轮播、 图片 预览、可滚动应用等，发挥想象可是实现诸多需求。
@H_ 404 _6@本篇幅采用 swiper5 ，所有版本的 api 都很相似，主要区别可以参考 官方的提供的说明 。
1. 使用
< style > .container { height : px ; overflow : hidden ; } .slide-item { dis play : flex ; justify-content : center ; align-items : center ; color : white ; font-size : px ; } .item1 { background-color : cornflowerblue ; } .item2 { background-color : darkslateblue ; } .item3 { background-color : darkorange ; } </ style > < div class = " container " > < div class = " swiper-wrapper " > < div class = " swiper-slide slide-item item1 " > 第一屏 </ div > < div class = " swiper-slide slide-item item2 " > 第二屏 </ div > < div class = " swiper-slide slide-item item3 " > 第三屏 </ div > </ div > </ div > < link href = " https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css " rel = " stylesheet " > < script src = " https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js " > </ script > < script > var mySwiper = new Swiper ( '.container' , { a utop lay : true , // 自动 切页 } ) ; </ script >@H_ 404 _6@ swiper 需要引入两个资源，通常和 UI 相关的框架都会有两个及以上资源，需要额外引入样式。
@H_ 404 _6@轮播是非常常见的需求，只需一些简单的 DOM 结构就可以完成。
@H_ 404 _6@ .swiper-wrapper 和 .swiper-slide 两个类是和 swiper 联动的，swiper 在初始化的时候会在 swiper-wrapper 下 swiper-slide 作为每一项，这些类名都是可通过配置 修改 的。
2. 使用 swiper 实现移动端的 图片 预览
@H_ 404 _6@移动端产品的 图片 查看几乎都是全屏预览，可以作用滑动切换图， 支持 缩放手势等，swiper 天然 支持 这些 功能 ，同时又可以深度定制，适合制作业务组建嵌入项目。
@H_ 404 _6@分析一下需求：点击 图片 查看大图， 图片 可以手势缩放，同时 支持 左右切换。
@H_ 404 _6@其实这就是 一个 不会 自动 切换的轮播，通过 swiper 就能实现。
@H_ 404 _6@可以设计 一个 方法 ， 方法 接收 当前 图片 和所有 图片 列表，然后每个 图片 为一页， 生成 一个 轮播， 显示 在 页面 的最上层。
<!DOCTYPE html> < html lang = " en " > < head > < Meta charset = " UTF-8 " > < Meta name = " viewport " content = " width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable =no " > </ head > < body > < style > .container { position : fixed ; top : ; b ott om : ; right : ; left : ; background-color : rgba ( , , , ) ; } .container .swiper-pagination { dis play : none ; } .slide-item { overflow : hidden ; } .slide-item img { width : ; } .count { position : absolute ; left : ; transform : translateX ( - ) ; top : px ; color : white ; } </ style > < link href = " https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css " rel = " stylesheet " > < script src = " https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js " > </ script > < script > function previewImage ( current , list ) { if ( ! list ) list = [ current ] ; // 如果没传， 默 认以初始图为列表 if ( list . length === ) list = [ current ] ; // 如果数组为空 则以初始图为列表 var idx = ; // 寻找初始图在列表的位置 var html = list . map ( function ( item , index ) { if ( item === current ) { // 如果两个图 url 相等，则说明初始图就是 在这 个位置 idx = index + ; // 记录下位置 } // 拼 一个 swiper-slide return [ '<div class="swiper-slide slide-item">' , '<div class="swiper-zoom-container">' , // 应用缩放配置项要提供这个节点 '<img src="' + item + '" />' , '</div>' , '</div>' , ] . join ( '' ) ; } ) ; var wrapper = document . createElement ( 'div' ) ; // 创建 一个 swiper-wrapper wrapper . className = 'swiper-wrapper' ; wrapper . innerHTML = html . join ( '' ) ; // 把所有 swiper-slide 塞进去 var container = document . createElement ( 'div' ) ; // 创建跟节点 container . className = 'container' ; // 把所有 html 拼起来 container . innerHTML = [ '<div class="count">' , '<span class="current">' + ( idx || ) + '</span>' , '/' , '<span class="total">' + list . length + '</span>' , '</div>' , wrapper . outerHTML , '<div class="swiper-pagination"></div>' , ] . join ( '' ) ; // 添加 到 DOM 中 document . body . appendChild ( container ) ; // 实例化 一个 swiper new Swiper ( container , { zoom : true , // 缩放开启 loop : list . length > , // 如果 图片 只有一张，则不开启循环 pagination : { // 分页 配置 el : '.swiper-pagination' , } , on : { // 事件监听 paginationUpdate : function ( e ) { // 当 分页 发生变化的时候 var idx = e . realIndex ; // 拿到当前页索引 // 赋值给 分页 计数器 container . querySelector ( '.current' ) . innerText = idx + ; } , } , } ) . slid eto ( idx , ) ; // 默 认展示初始图 } previewImage ( 'https://img.mukewang.com/5ef94c8e000109e118720764.jpg' , [ 'https://img.mukewang.com/5f057a6a0001f4f918720764.jpg' , 'https://img.mukewang.com/5ef94c8e000109e118720764.jpg' , 'https://img.mukewang.com/5ef15e4e00010b0018720764.jpg' , 'https://img.mukewang.com/5f0561160001630718720764.jpg' , ] ) ; </ script > </ body > </ html >@H_ 404 _6@源码没有跳着走的逻辑，都 加上 了注释，相对好理解。
@H_ 404 _6@这个 图片 查看 方法 利用了 swiper 提供的滚动、手势缩放、手势拖动、 分页 的能力，实现相对简单，如果需要自己去实现相应 功能 ，就需要花费大量的经历。
@H_ 404 _6@
3. 小结
@H_ 404 _6@swiper 本身的定位并不是轮播，轮播是其应用场景之一，发挥想象，可以用 swiper 做许多事情。
ECMAScript 6 ? ?moment声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92458