正则表达式记巧 正则表达式不要背正则表达式一直是困扰很多程序员的一门技术，当然也包括曾经的我。大多数时候我们在开发过程中要用到某些正则表达式的时候，都会打开谷歌或百度直接搜索然后拷贝粘贴。当下一次再遇到相同问题的时候，同样的场景又再来一遍。作为一门用途很广的技术，我相信深入理解正则表达式并能融会贯通是值得的。所以，希望这篇文章能帮助大家理清思路，搞懂正则表达式各种符号之间的内在联系，形成知识体系，当下次再遇到正则表达式的时候可以不借助搜索引擎，自己解决。正则表达式到底是什么正则表达式(Regular Expression)其实就是一门工具，目的是为了字符串模式匹配，从而实现搜索和替换功能。它起源于上个20世纪50年代科学家在数学领域做的一些研究工作，后来才被引入到计算机领域中。从它的命名我们可以知道，它是一种用来描述规则的表达式。而它的底层原理也十分简单，就是使用状态机的思想进行模式匹配。大家可以利用regexper.com这个工具很好地可视化自己写的正则表达式:如/\d\w+/这个正则生成的状态机图:对于具体的算法实现，大家如果感兴趣可以阅读《算法导论》。从字符出发我们学习一个系统化的知识，一定要从其基础构成来了解。正则表达式的基本组成元素可以分为：字符和元字符。字符很好理解，就是基础的计算机字符编码，通常正则表达式里面使用的就是数字、英文字母。而元字符，也被称为特殊字符，是一些用来表示特殊语义的字符。如^表示非,|表示或等。利用这些元字符，才能构造出强大的表达式模式(pattern)。接下来，我们就来从这些基本单位出发，来学习一下如何构建正则表达式。单个字符最简单的正则表达式可以由简单的数字和字母组成，没有特殊的语义，纯粹就是一一对应的关系。如想在'apple'这个单词里找到‘a'这个字符，就直接用/a/这个正则就可以了。但是如果想要匹配特殊字符的话，就得请出我们第一个元字符**\**， 它是转义字符字符，顾名思义，就是让其后续的字符失去其本来的含义。举个例子：我想匹配*这个符号，由于*这个符号本身是个特殊字符，所以我要利用转义元字符\来让它失去其本来的含义：/\*/如果本来这个字符不是特殊字符，使用转义符号就会让它拥有特殊的含义。我们常常需要匹配一些特殊字符，比如空格，制表符，回车，换行等, 而这些就需要我们使用转义字符来匹配。为了便于记忆，我整理了下面这个表格，并附上记忆方式：特殊字符正则表达式记忆方式换行符\nnew line换页符\fform feed回车符\rreturn空白符\sspace制表符\ttab垂直制表符\vvertical tab回退符[\b]backspace,之所以使用[]符号是避免和\b重复多个字符单个字符的映射关系是一对一的，即正则表达式的被用来筛选匹配的字符只有一个。而这显然是不够的，只要引入集合区间和通配符的方式就可以实现一对多的匹配了。在正则表达式里，集合的定义方式是使用中括号[和]。如/[123]/这个正则就能同时匹配1,2,3三个字符。那如果我想匹配所有的数字怎么办呢？从0写到9显然太过低效，所以元字符-就可以用来表示区间范围，利用/[0-9]/就能匹配所有的数字, /[a-z]/则可以匹配所有的英文小写字母。即便有了集合和区间的定义方式，如果要同时匹配多个字符也还是要一一列举，这是低效的。所以在正则表达式里衍生了一批用来同时匹配多个字符的简便正则表达式:匹配区间正则表达式记忆方式除了换行符之外的任何字符.句号,除了句子结束符单个数字, [0-9]\ddigit除了[0-9]\Dnot digit包括下划线在内的单个字符，[A-Za-z0-9_]\wword非单字字符\Wnot word匹配空白字符,包括空格、制表符、换页符和换行符\sspace匹配非空白字符\Snot space循环与重复一对一和一对多的字符匹配都讲完了。接下来，就该介绍如何同时匹配多个字符。要实现多个字符的匹配我们只要多次循环，重复使用我们的之前的正则规则就可以了。那么根据循环次数的多与少，我们可以分为0次，1次，多次，特定次。0 | 1元字符?代表了匹配一个字符或0个字符。设想一下，如果你要匹配color和colour这两个单词，就需要同时保证u这个字符是否出现都能被匹配到。所以你的正则表达式应该是这样的：/colou?r/。>= 0元字符*用来表示匹配0个字符或无数个字符。通常用来过滤某些可有可无的字符串。>= 1元字符+适用于要匹配同个字符出现1次或多次的情况。特定次数在某些情况下，我们需要匹配特定的重复次数，元字符{和}用来给重复匹配设置精确的区间范围。如'a'我想匹配3次,那么我就使用/a{3}/这个正则，或者说'a'我想匹配至少两次就是用/a{2,}/这个正则。以下是完整的语法：- {x}: x次 - {min, max}： 介于min次到max次之间 - {min, }: 至少min次 - {0, max}： 至多max次由于这些元字符比较抽象，且容易混淆，所以我用了联想记忆的方式编了口诀能保证在用到的时候就能回忆起来。匹配规则元字符联想方式0次或1次?且问,此事有还无0次或无数次*宇宙洪荒,辰宿列张：宇宙伊始，从无到有，最后星宿布满星空1次或无数次+一加, +1特定次数{x}, {min, max}可以想象成一个数轴，从一个点，到一个射线再到线段。min和max分别表示了左闭右闭区间的左界和右界位置边界上面我们把字符的匹配都介绍完了，接着我们还需要位置边界的匹配。在长文本字符串查找过程中，我们常常需要限制查询的位置。比如我只想在单词的开头结尾查找。单词边界单词是构成句子和文章的基本单位，一个常见的使用场景是把文章或句子中的特定单词找出来。如：The cat scattered his food all over the room.我想找到cat这个单词，但是如果只是使用/cat/这个正则，就会同时匹配到cat和scattered这两处文本。这时候我们就需要使用边界正则表达式\b，其中b是boundary的首字母。在正则引擎里它其实匹配的是能构成单词的字符(\w)和不能构成单词的字符(\W)中间的那个位置。上面的例子改写成/\bcat\b/这样就能匹配到cat这个单词了。字符串边界匹配完单词，我们再来看一下一整个字符串的边界怎么匹配。元字符^用来匹配字符串的开头。而元字符$用来匹配字符串的末尾。注意的是在长文本里，如果要排除换行符的干扰，我们要使用多行模式。试着匹配I am scq000这个句子：I am scq000. I am scq000. I am scq000.我们可以使用/^I am scq000\.$/m这样的正则表达式，其实m是multiple line的首字母。正则里面的模式除了m外比较常用的还有i和g。前者的意思是忽略大小写，后者的意思是找到所有符合的匹配。最后，总结一下：边界和标志正则表达式记忆方式单词边界\bboundary非单词边界\Bnot boundary字符串开头^小头尖尖那么大个字符串结尾$终结者，美国科幻电影，美元符$多行模式m标志multiple of lines忽略大小写i标志ignore case, case-insensitive全局模式g标志global子表达式字符匹配我们介绍的差不多了，更加高级的用法就得用到子表达式了。通过嵌套递归和自身引用可以让正则发挥更强大的功能。从简单到复杂的正则表达式演变通常要采用分组、回溯引用和逻辑处理的思想。利用这三种规则，可以推演出无限复杂的正则表达式。分组其中分组体现在：所有以(和)元字符所包含的正则表达式被分为一组，每一个分组都是一个子表达式，它也是构成高级正则表达式的基础。如果只是使用简单的(regex)匹配语法本质上和不分组是一样的，如果要发挥它强大的作用，往往要结合回溯引用的方式。回溯引用所谓回溯引用（backreference）指的是模式的后面部分引用前面已经匹配到的子字符串。你可以把它想象成是变量，回溯引用的语法像\1,\2,....,其中\1表示引用的第一个子表达式，\2表示引用的第二个子表达式，以此类推。而\0则表示整个表达式。假设现在要在下面这个文本里匹配两个连续相同的单词，你要怎么做呢？Hello what what is the first thing, and I am am scq000. 复制代码利用回溯引用，我们可以很容易地写出\b(\w+)\s\1这样的正则。回溯引用在替换字符串中十分常用，语法上有些许区别，用$1,$2...来引用要被替换的字符串。下面以js代码作演示：var str = 'abc abc 123'; str.replace(/(ab)c/g,'$1g'); // 得到结果 'abg abg 123' 复制代码如果我们不想子表达式被引用，可以使用非捕获正则(?:regex)这样就可以避免浪费内存。var str = 'scq000'. str.replace(/(scq00)(?:0)/, '$1,$2') // 返回scq00,$2 // 由于使用了非捕获正则，所以第二个引用没有值，这里直接替换为$2 复制代码有时，我们需要限制回溯引用的适用范围。那么通过前向查找和后向查找就可以达到这个目的。前向查找前向查找(lookahead)是用来限制后缀的。凡是以(?=regex)包含的子表达式在匹配过程中都会用来限制前面的表达式的匹配。例如happy happily这两个单词，我想获得以happ开头的副词，那么就可以使用happ(?=ily)来匹配。如果我想过滤所有以happ开头的副词，那么也可以采用负前向查找的正则happ(?!ily)，就会匹配到happy单词的happ前缀。后向查找介绍完前向查找，接着我们再来介绍一下它的反向操作：后向查找(lookbehind)。后向查找(lookbehind)是通过指定一个子表达式，然后从符合这个子表达式的位置出发开始查找符合规则的字串。举个简单的例子： apple和people都包含ple这个后缀，那么如果我只想找到apple的ple，该怎么做呢？我们可以通过限制app这个前缀，就能唯一确定ple这个单词了。/(?<=app)ple/ 复制代码其中(?<=regex)的语法就是我们这里要介绍的后向查找。regex指代的子表达式会作为限制项进行匹配，匹配到这个子表达式后，就会继续向后查找。另外一种限制匹配是利用(?<!regex) 语法，这里称为负后向查找。与正前向查找不同的是，被指定的子表达式不能被匹配到。于是，在上面的例子中，如果想要查找apple的ple也可以这么写成/(?<!peo)ple。需要注意的，不是每种正则实现都支持后向查找。在javascript中是不支持的，所以如果有用到后向查找的情况，有一个思路是将字符串进行翻转，然后再使用前向查找，作完处理后再翻转回来。看一个简单的例子：// 比如我想替换apple的ple为ply var str = 'apple people'; str.split('').reverse().join('').replace(/elp(?=pa)/, 'ylp').split('').reverse().join(''); 复制代码ps: 感谢评论区提醒，从es2018之后，chrome中的正则表达式也支持反向查找了。不过，在实际项目中还需要注意对旧浏览器的支持，以防线上出现Bug。详情请查看http://kangax.github.io/compat-table/es2016plus/#test-RegExp_Lookbehind_Assertions最后回顾一下这部分内容：回溯查找正则记忆方式引用\0,\1,\2 和 $0, $1, $2转义+数字非捕获组(?:)引用表达式(()), 本身不被消费(?),引用(:)前向查找(?=)引用子表达式(())，本身不被消费(?), 正向的查找(=)前向负查找(?!)引用子表达式(())，本身不被消费(?), 负向的查找(!)后向查找(?<=)引用子表达式(())，本身不被消费(?), 后向的(<，开口往后)，正的查找(=)后向负查找(?<!)引用子表达式(())，本身不被消费(?), 后向的(<，开口往后)，负的查找(!)逻辑处理计算机科学就是一门包含逻辑的科学。让我们回忆一下编程语言当中用到的三种逻辑关系，与或非。在正则里面，默认的正则规则都是与的关系所以这里不讨论。而非关系，分为两种情况：一种是字符匹配，另一种是子表达式匹配。在字符匹配的时候，需要使用^这个元字符。在这里要着重记忆一下：只有在[和]内部使用的^才表示非的关系。子表达式匹配的非关系就要用到前面介绍的前向负查找子表达式(?!regex)或后向负查找子表达式(?<!regex)。或关系，通常给子表达式进行归类使用。比如，我同时匹配a,b两种情况就可以使用(a|b)这样的子表达式。逻辑关系正则元字符与无非[^regex]和!或|总结对于正则来说，符号之抽象往往让很多程序员却步。针对不好记忆的特点，我通过分类和联想的方式努力让其变得有意义。我们先从一对一的单字符，再到多对多的子字符串介绍，然后通过分组、回溯引用和逻辑处理的方式来构建高级的正则表达式。在最后，出个常用的正则面试题吧：请写出一个正则来处理数字千分位，如12345替换为12,345。请尝试自己推理演绎得出答案，而不是依靠搜索引擎:)。来源：掘金

jquery.SuperSlide.2.1.1.js轮播插件使用 SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！以下是一个简单的案例html代码：<div class="slideBox2s"> <div class="hd"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <ul class="bd"> <li> <a href="https://www.tpxhm.com/fdetail/16.html" target="_blank" > <img src="https://www.tpxhm.com/fdetail/12.jpg" alt=""> </a> </li> </ul> </div> <!-- 下面是前/后按钮代码，如果不需要删除即可 --> <a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div> <style> .slideBox2s{ width:261px; height:361px; position:relative; margin: 0 auto; } .slideBox2s .bd{ position:relative; height:100%; z-index:0; } .slideBox2s .bd li{ zoom:1; vertical-align:middle; } .slideBox2s .bd li img{width:261px; height:361px; } /* 下面是前/后按钮代码，如果不需要删除即可 */ .slideBox1s .prev,.slideBox2s .prev,.slideBox3s .prev,.slideBox4s .prev{ display: block; width: 18px; height: 19px; background: url(btnico_left.jpg) no-repeat center top; position: absolute; right: 25px;top: -38px;} .slideBox1s .next,.slideBox2s .next,.slideBox3s .next,.slideBox4s .next{display: block; width: 18px; height: 19px; background: url(btnico_right.jpg) no-repeat center top; position: absolute; right: 0px;top: -38px;} </style>js代码：<script> $(function(){ jQuery(".slideBox-banner").slide({mainCell:".bd",autoPlay:true,delayTime:500,effect:"leftLoop",interTime:2000}); }) </script>附件：jquery.SuperSlide.2.1.1.txt

jQuery带缩略图轮播效果 jQuery带缩略图轮播效果插件<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery带缩略图轮播效果</title> <style> body,div,ul,li{margin:0;padding:0} ul{list-style:none} img{border:0} .an_lisbox{width:100%; height: 835px; background: #fff; margin: 0 auto; overflow:hidden; position: relative;} .large_box{margin-bottom:10px;width:2000px;height:680px; overflow:hidden;} .large_box img{display:block;position: absolute; left: 50%; margin-left: -1000px;} .hmal_Gif{width: 578px; height: 335px;position: absolute;left: 50%;margin-left: -548px !important;top: 72px;border-radius: 10px; } .hmal_m{ width: 216px; height: 216px;position: absolute;left: 50%; margin-left: -90px !important;top: 270px;border-radius: 50%;} .small_box{width:1200px;height:263px; overflow: hidden; background: #fff; position: absolute; left: 50%; margin-left: -600px; bottom: 0px;} .small_list{position:relative;width:972px; margin: 0 auto; height:263px;overflow:hidden; position: relative;} .small_list ul{ width: 1200px; height:263px;overflow:hidden; text-align: center;} .small_list ul li{ width: 114px; height: 263px; float:left;margin-right:29px;} .small_list ul li .bun_bg{width: 114px; height: 114px; float: left; border-radius: 50%; margin-top: 40px; overflow: hidden; background: #877a8b;} .small_list ul li .bun_bg img{display:block; width: 114px; height: 114px;} .small_list ul li p{ color: #8f8f8f; font-weight: normal;font-size: 24px;line-height: 24px;margin-top: 10px; margin-bottom: 0px} .small_list ul li p span{color: #8f8f8f; font-weight: normal;font-size: 16px;line-height: 24px;margin-top: 10px; margin-bottom: 0px} .small_list ul li.on .bun_bg{ background: #aa63f2;} .small_list ul li.on p{ color: #aa63f2;} .small_list ul li.on p span{ color: #aa63f2;} .left_btn{ width: 55px; height: 55px; position: absolute; left: 50%; margin-left: -580px; background:url(../picture/btnl.png) no-repeat; background-color: #d4d4da; border-radius: 50%; bottom: 125px;} .right_btn{width: 55px; height: 55px;background:url(../picture/btnr.png) no-repeat; background-color: #d4d4da; position: absolute; left: 50%; margin-left: 530px; border-radius: 50%; bottom: 125px;} .left_btn:hover{ background: url(../picture/btnl.png) no-repeat,#aa63f2; cursor: pointer;} .right_btn:hover{ background: url(../picture/btnr.png) no-repeat,#aa63f2; cursor: pointer;} </style> </head> <body> <div class="an_lisbox"> <div class="large_box"> <ul> <li> <a href="https://www.tpxhm.com/fdetail/19.html"> <img src="https://www.tpxhm.com/fdetail/yb.jpg" alt="" class="sercerimg"> </a> </li> <li> <a href="https://www.tpxhm.com/fdetail/19.html"> <img src="https://www.tpxhm.com/fdetail/yp.jpg" alt="" class="sercerimg"> </a> </li> </ul> </div> <div class="small_box"> <div class="small_list"> <ul> <li class="on"> <div class="bun_bg"><img src="https://www.tpxhm.com/fdetail/ky_41.png" alt=""></div> <p>1</span></p> </li> <li> <div class="bun_bg"><img src="https://www.tpxhm.com/fdetail/yp_03.png" alt=""></div> <p>2</p> </li> <li> </ul> </div> </div> <span class="left_btn"></span> <span class="right_btn"></span> </div> <script src="https://www.tpxhm.com/fdetail/js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://www.tpxhm.com/fdetail/js/carousel.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ /* 商品轮播图（带缩略图的轮播效果） */ $(".an_lisbox").thumbnailImg({ large_elem: ".large_box", small_elem: ".small_list", left_btn: ".left_btn", right_btn: ".right_btn" }); }); </script> </body> </html>附件：carousel.min.js.txt

解决swiper4插件元素点击出现蓝色边框问题 关于swiper4插件元素点击出现蓝色边框问题，可以加上以下css代码来解决该问题。span:focus { outline: none; }

swiper3、swiper4网站常用焦点图案例及demo下载 [Swiper] PC网站常用焦点图官方案例下载链接已失效，这里对官方的进行了补充和修改，swiper3和swiper4两种写法。1、swiper3案例：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>常用焦点图</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.tpxhm.com/fdetail/static/css/swiper-3.4.2.min.css"> </head> <body> <style> body { padding: 0; margin: 0; } .pc-slide { width: 500px; margin: 0 auto; } .view .swiper-container { width: 500px; height: 500px; } .view .arrow-left { background: url(static/images/index_tab_l.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -25px; width: 28px; height: 51px; z-index: 10; } .view .arrow-right { background: url(static/images/index_tab_r.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -25px; width: 28px; height: 51px; z-index: 10; } .preview { width: 100%; margin-top: 10px; position: relative; } .preview .swiper-container { width: 430px; height: 82px; margin-left: 35px; } .preview .swiper-slide { width: 87px; height: 82px; cursor:pointer; } .preview .slide6 { width: 82px; } .preview .arrow-left { background: url(static/images/feel3.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -9px; width: 9px; height: 18px; z-index: 10; } .preview .arrow-right { background: url(static/images/feel4.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -9px; width: 9px; height: 18px; z-index: 10; } .preview img { padding: 1px; } .preview .active-nav img { padding: 0; border: 1px solid #F00; } </style> <div> <div> <div> <a href="https://www.tpxhm.com/fdetail/628.html#"></a> <a href="https://www.tpxhm.com/fdetail/628.html#"></a> <div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b1.jpg" alt=""></a> </div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b2.jpg" alt=""></a> </div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b3.jpg" alt=""></a> </div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b4.jpg" alt=""></a> </div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b5.jpg" alt=""></a> </div> <div> <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="https://www.tpxhm.com/fdetail/static/picture/b6.jpg" alt=""></a> </div> </div> </div> </div> <div> <a href="https://www.tpxhm.com/fdetail/628.html#"></a> <a href="https://www.tpxhm.com/fdetail/628.html#"></a> <div> <div> <div class="swiper-slide active-nav"> <img src="https://www.tpxhm.com/fdetail/static/picture/s1.jpg" alt=""> </div> <div> <img src="https://www.tpxhm.com/fdetail/static/picture/s2.jpg" alt=""> </div> <div> <img src="https://www.tpxhm.com/fdetail/static/picture/s3.jpg" alt=""> </div> <div> <img src="https://www.tpxhm.com/fdetail/static/picture/s4.jpg" alt=""> </div> <div> <img src="https://www.tpxhm.com/fdetail/static/picture/s5.jpg" alt=""> </div> <div class="swiper-slide slide6"> <img src="https://www.tpxhm.com/fdetail/static/picture/s6.jpg" alt=""> </div> </div> </div> </div> </div> <script src="https://www.tpxhm.com/fdetail/static/js/jquery-3.2.1.min.js"></script> <script src="https://www.tpxhm.com/fdetail/static/js/swiper-3.4.2.jquery.min.js"></script> <script> var viewSwiper = new Swiper('.view .swiper-container', { onSlideChangeStart: function() { updateNavPosition() } }) $('.view .arrow-left,.preview .arrow-left').on('click', function(e) { e.preventDefault() if (viewSwiper.activeIndex == 0) { viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000); return } viewSwiper.slidePrev() }) $('.view .arrow-right,.preview .arrow-right').on('click', function(e) { e.preventDefault() if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) { viewSwiper.slideTo(0, 1000); return } viewSwiper.slideNext() }) var previewSwiper = new Swiper('.preview .swiper-container', { //visibilityFullFit: true, slidesPerView: 'auto', allowTouchMove: false, onTap: function() { viewSwiper.slideTo(previewSwiper.clickedIndex) } }) function updateNavPosition() { $('.preview .active-nav').removeClass('active-nav') var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav') console.log(activeNav); // if (!activeNav.hasClass('swiper-slide-visible')) { // if (activeNav.index() > previewSwiper.activeIndex) { // var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1 // previewSwiper.slideTo(activeNav.index() - thumbsPerNav) // } else { // previewSwiper.slideTo(activeNav.index()) // } // } } </script> </body> </html>2、swiper4写法：swiper4的写法和swiper3写法差不多一样，只是函数不一样，及引入文件不一样。2.1、引入css和jslink rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>2.2、将第一个onTab函数修改为如下，即可。var viewSwiper = new Swiper('.view .swiper-container', { on: { slideChangeTransitionStart: function(){ updateNavPosition() }, } })2.3、将如下代码onTap: function() { viewSwiper.slideTo(previewSwiper.clickedIndex) }改为on:{ tap: function(){ viewSwiper.slideTo(previewSwiper.clickedIndex) }, }附件：demo下载：https://qiniu.tpxhm.top/code/swiper.zip