基于swiper实现旋转木马轮播图（适配移动端）

原创 已于 2024-12-02 14:23:25 修改 · 3.1k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

于 2022-08-24 11:24:43 首次发布
本文介绍了如何使用Swiper 3.0版本创建响应式轮播图，无需引入额外的jQuery库，只需CSS和JS文件，适合快速开发。通过实例展示了HTML结构、CSS样式和JS配置，适合开发者作为轻量级轮播图解决方案参考。
该文章已生成可运行项目，

效果如下：

注：这里引用的是swiper3.0，swiper3.0无需加载公用库：Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等，但基于swiper仍需引入swiper相关的css及js。

css：https://3.swiper.com.cn/dist/css/swiper.min.css 

js：https://3.swiper.com.cn/dist/js/swiper.min.js

HTML：

<div class="swiperBox">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-
本文章已经生成可运行项目
最低0.47元/天 解锁文章
Hive,coalesce / null / ^[0-9]+$判断数字
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
11-12 1784
select '' not regexp '^\\d+$' --空'',true select '' not regexp '^\d+$' --空'',true select null not regexp '^\\d+$' -- NULL select null not regexp '^\d+$' -- NULL select ' ' not regexp '^\\d+$' --空格' ', true select ' ' not regexp '^\d+$' --空格' ', true.
精通正则表达式笔记二---正则表达式基础概念?,+,*,{ },\,“ “,时间，小结
xjfhz的博客
12-12 2046
第一，第二节笔记学习了以下内容：几点注意事项：1、各个egrep程序是有差别的。它们支持的元字符，以及这些元字符的确切含义，通常都有差别—要参考相应的文档。2、使用括号的3个理由是：限制多选结构、分组和捕获文本。3、字符组的特殊性在于，关于元字符的规定是完全独立于正则表达式语言“主体”的。4、多选结构和字符组是截然不同的，它们的功能完全不同，只是在有限的情况下，它们的表现相同。5、排除型字符组同样是一种“肯定断言”一即使它的名字里包含了“排除”两个字，它仍然需要匹配一个字符。
常用的正则表达式示例
qwy715229258163的博客
03-24 501
1、匹配所有的正数：1+$ 2、匹配所有的小数：^-?[0-9].?[0-9]$ 3、匹配所有的整数：^-?[0-9]+$ 4、提取信息中的中文字符串： [\u4e00-\u9fa5] ; 5、提取信息中的邮件地址：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)* 6、提取信息中的中国手机号码：(86)013\d{9} 7、提取信息中的中国固定电话号码：((\d{3,4})|\d{3,4}-|\s)?\d{8} 8、提取信息中的中国邮政编码：[1-9]{1}(\d+){5}
保姆级教程带你了解正则表达式
I_am_so_glad_you的博客
10-20 654
.匹配到实际的点号；对于中国大陆的手机号码，其正则表达式可以定义为^1(3\\d{2}|4[5-7]\\d{2}|5[0-35-9]\\d{2}|66\\d{2}|7[0-35-9]\\d{2}|8\\d{3}|9\\d{2})(0[0-9]{2,3}|[1-9][0-9]{2,3})$ ，这个表达式在前面已经详细解释过，它涵盖了不同运营商的各种号段，并且严格限定了手机号码的格式。它与普通分组(pattern)的区别在于，非捕获分组只用于逻辑分组，不会保存匹配的内容，也不会为其分配组号。
^[0-9]+$
weixin_58083606的博客
10-30 737
是匹配字符串开始的意思，【0-9】意思就是只要是范围0-9里的东西都要，或者说只要不是数字都不要～+的意思的^[0-9]的范围里匹配一次以上～
正则表达式
Maktub的博客
03-12 341
正则基础 .:任意字符（除换行符以外：\n，\r，\u2028 or \u2029） \d : 数字0-9 \D: 非\d，即不是数字0-9的字符 \w : 数字0-9，或字母a-z及A-Z（大小写），或下划线 \W : 非\w \s ：空格符、TAB、换页符、换行符 \S ：非\s \t \r \n \v \f ：回车 换行 垂直制表符 换页符 范围符号 ...
[[ $i =~ ^[0-9]+$ ]] && echo 1 意思
大海蓝天的专栏
11-20 4023
=~ 表示的是匹配 && 是前一个命令为真 才执行后一个命令 [[ ]] 是if判断使用正则表达式的固定格式 ^ 是以什么开头 [0-9]是表示范围内都是数字 +表示1到多个 $是结尾 ^[0-9]+$ 就是 以数字开头并结尾的 整行都是数字 整句的意思是 如果 变量$i 匹配到了 以1到多个数字开头并结尾的 那么 就 echo 1
C#-正则基础 . 匹配除回车外的字符
心少朴
05-20 823
 .NET Framework : 4.7.2        IDE : Visual Studio Community 2019         OS : Windows 10 x64     typesetting : Markdown         blog : blog.youkuaiyun.com/yushaopu        gi...
17 种正则表达式"^\d+$"　　//非负整数
05-07
5. **负浮点数**：“`^-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$`” - 解释：仅匹配负浮点数。 6. **字母串**：“`^[A-Za-z]+$`”，“`^[A-Z]+$`”，“`^[a-z]+$`” - ...
js正则表达式 限1-2位整数，或者至多含有两位小数的写法
10-15
- `/^(^[0-9]{1,2}$)|(^[0-9]{1,2}[.]{1}[0-9]{1,2}$)/`：这个表达式包含两个部分，由“|”分隔，表示匹配1到2位整数（`^[0-9]{1,2}$`），或者匹配含有最多两位小数的数字（`^[0-9]{1,2}[.]{1}[0-9]{1,2}$`）。...
精选资源
JS正则表达式验证端口范围(0-65535)
01-19
(/^[1-9]\d*$/.test(port) && 1 <= 1 * port && 1 * port <= 65535)){ return false } 提示文案： 您的端口不符合范围：0-65535 PS：下面看下JavaScript(Js)正则表达式验证IP+端口号 开发环境(蓝色粗体字为...
正则表达式实现将MM/DD/YYYY格式的日期转换为YYYY-MM-DD格式
10-25
在这个例子中，正则表达式"([0-9]{1,2})/([0-9]{1,2})/([0-9]{4})"用来匹配符合MM/DD/YYYY格式的日期字符串。其中： - [0-9]{1,2}表示匹配1到2位数字，这里对应月份和日期的数字。 - [0-9]{4}表示匹配4位数字，这里...
正则表达式中的^
天天学安全专属博客
05-15 652
正则表达式
^[0-9]+(\.[0-9]{1,4})?$"); 正则表达式，该表达式的意思：检测字符串是否匹配由0-9出现1次或多次
热门推荐
tfy1332的专栏
06-03 1万+
var myReg=new RegExp("^[0-9]+(\.[0-9]{1,4})?$"); 该语句定义了一个正则表达式，该表达式的意思：检测字符串是否匹配由0-9出现1次或多次，后跟至少出现一个（.后加0-9出现至少1次至多出现4次） 具体例子，该表达式匹配如下字符串： 0.0012,012.5548,587998.1135,601.156.445等字符串 但不匹配如下字符串： .123，.
正则表达式中^的用法
专注自动化、性能测试、测试架构学习交流
12-16 1758
用法一: 限定开头 文档上给出了解释是匹配输入的开始，如果多行标示被设置成了true，同时会匹配后面紧跟的字符。 比如 /^A/会匹配"An e"中的A，但是不会匹配"ab A"中的A 用法二：（否）取反 当这个字符出现在一个字符集合模式的第一个字符时，他将会有不同的含义。 比如：/[^a-z\s]/会匹配"my 3 sisters"中的"3"这里的”^”的意思是字符类的否定，上面的正则表达式的意思是匹配不是（a到z和空白字符）的字符。 总结： 什...
sql正则
08-26 602
数字 regexp '^[0-9]+$' 以下几个经常有人用但是不准确，比如 SELECT '123sdc4567' REGEXP '[^0-9.]'; 判断为true SELECT '123sdc4567' REGEXP '[0-9]+$'; 也判断为true
正则表达式(全)
Knight_art的博客
07-03 703
一、校验数字的表达式*表示匹配0-无穷+表示匹配1-无穷数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$正数、负数、...
/^(\d)$/, "0$1"
Brain_hao的博客
03-14 1097
^匹配开头 [1-9]匹配1到9的数字一次 \d*匹配0到9的数字零次或者多次 （\d意义等同于[0-9]） \.[0-9]+匹配小数点及其后面0到9数字1次或者多次, () 是分组的意思 是匹配0次或者1次 (\.[0-9]+)?也就是说后面带小数点或者不带小数点的数字都可以匹配. $匹配结尾 | 是或者的意思 ^0$就是匹配数字0,前后没有其他字符. 后面的/gi,g表示全
判断如下正则表达式 /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}
最新发布
11-27
<think> 首先，用户的问题是关于理解一个特定的正则表达式：/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$。我需要解释这个正则表达式的含义。 回顾系统级指令： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题。 - 最后，生成相关问题。 用户提供了三个引用： - 引用[1]：关于常见正则表达式，如正浮点数。 - 引用[2]：包含各种正则表达式的例子，如字母数字下划线字符串、整数、浮点数、中文字符、身份证号等。 - 引用[3]：关于正则表达式的简化建议。 但用户说这些引用仅供参考，我应该基于用户的问题来回答。用户的问题是解释正则表达式/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$的含义。 所以，我需要解析这个正则表达式。 分解正则表达式： - /^：表示字符串的开始。 - (?=.*[A-Z])：这是一个正向先行断言（positive lookahead）。意思是：字符串中必须包含至少一个大写字母（A-Z）。 - (?=.*[a-z])：另一个正向先行断言，表示字符串中必须包含至少一个小写字母（a-z）。 - (?=.*[0-9])：另一个正向先行断言，表示字符串中必须包含至少一个数字（0-9）。 - .{8,}：表示任意字符（除换行符外）至少8次。意思是字符串长度至少为8个字符。 - $：表示字符串的结束。 所以，整体来看，这个正则表达式匹配的字符串必须： 1. 包含至少一个大写字母。 2. 包含至少一个小写字母。 3. 包含至少一个数字。 4. 长度至少为8个字符。 这通常用于密码强度验证，要求密码有大小写字母、数字，并且长度至少8位。 现在，构建回答： - 使用中文。 - 结构清晰：逐步解释。 - 引用相关部分：用户提供了引用，但它们是关于其他正则表达式的。我可以提到引用[2]中有类似的正则表达式例子，比如强密码的表达式，但用户的具体表达式不同。引用[2]中有类似的东西：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/，这很相似，但长度不同。 在引用[2]中：强密码：必须包含数字、字母，字符长度为6~15位 /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/ 或 /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,15}$/。 用户的正则是/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$，长度至少8，没有上限，并且使用.*允许任何字符。 所以，在回答中，我可以引用这个。 引用[3]是关于简化正则表达式的建议，但可能不直接相关。 回答结构： 1. 介绍正则表达式的整体目的：用于验证密码强度。 2. 分解表达式部分： - ^ 和 $：表示整个字符串。 - (?=.*[A-Z])：解释先行断言的含义。 - 类似地解释其他部分。 - .{8,}：长度要求。 3. 总结匹配的条件。 4. 自然地添加引用：例如，在解释先行断言时，可以提到引用中的类似例子。 引用标识：在引用的段落末尾添加[^n]。 最后，生成相关问题。 相关问题应该基于这个主题，比如： 1. 如何使用这个正则表达式在代码中？ 2. 这个正则表达式的局限性是什么？ 3. 如何修改它来添加特殊字符要求？ 4. 相关的正则表达式例子。 确保LaTeX：在回答中，如果有数学表达式，比如.*[A-Z]，这不算数学表达式，所以不需要用$...$。但如果有像范围或计数，可能不需要。指令是针对数学表达式的，所以这里可能不适用。 在引用中，用户有像^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$这样的表达式，但没有要求用LaTeX格式。指令说“所有行内数学表达式(包括变量、不等式、方程等)必须使用$...$格式”，但正则表达式不是数学表达式，所以我应该直接写正则表达式。 在回答中，我会直接写正则表达式代码，用反引号表示代码块或内联代码。 指令有示例：在“快速排序”例子中，有代码块用```python```。 所以，我可以将正则表达式放入代码块。 回答步骤： 1. 解释整体含义。 2. 分解每个部分。 3. 给出示例匹配的字符串。 4. 引用相关资源。 5. 生成相关问题。 用中文。 </think> ### 正则表达式 `/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$` 的含义解析 这个正则表达式主要用于验证密码强度，要求字符串满足特定的复杂度条件。以下我将逐步分解其结构，帮助您理解每个部分的含义。整个表达式的核心是使用**正向先行断言（positive lookahead）** 来确保字符串中包含大写字母、小写字母和数字，同时要求最小长度。正则表达式语法可参考站内引用中的常见模式[^2]。 #### 1. **整体结构** - `/^ ... $/`：这表示正则表达式匹配整个字符串，从开头 (`^`) 到结尾 (`$`)。例如，字符串 `"Abc12345"` 会被匹配，但 `" Abc12345"`（开头有空格）则不会，因为空格导致开头不匹配。 - 表达式由多个部分组成： - 三个正向先行断言 `(?=...)`：用于检查字符串是否满足某些条件，但不消耗字符（即不移动匹配位置）。 - `.`：匹配任意单个字符（除换行符外）。 - `{8,}`：表示前面的模式（这里是 `.`）至少重复 8 次，即字符串长度至少为 8 个字符。 - **简言之**：这个正则表达式要求字符串**必须同时包含至少一个大写字母、至少一个小写字母、至少一个数字，且总长度不少于 8 个字符**。它常用于密码策略中，确保密码强度。 #### 2. **分解每个部分** - `(?=.*[A-Z])`： - `(?= ... )` 是正向先行断言，表示“字符串必须满足括号内的条件”，但不计入匹配位置。 - `.*`：匹配零个或多个任意字符（`.` 表示任意字符，`*` 表示重复零次或多次）。 - `[A-Z]`：匹配一个大写字母（A 到 Z）。 - **含义**：字符串中必须包含至少一个大写字母。例如，在 `"abc123"` 中不满足（没有大写字母），而 `"Abc123"` 满足。 - 类似用法在引用[2]中的“强密码”例子中出现过（如 `/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/`）[^2]。 - `(?=.*[a-z])`： - 结构同上，但 `[a-z]` 匹配一个小写字母（a 到 z）。 - **含义**：字符串中必须包含至少一个小写字母。例如，`"ABC123"` 不满足（没有小写字母），而 `"Abc123"` 满足。 - `(?=.*[0-9])`： - `[0-9]` 匹配一个数字（0 到 9）。 - **含义**：字符串中必须包含至少一个数字。例如，`"Abcdefg"` 不满足（没有数字），而 `"Abc123"` 满足。 - `.{8,}`： - `.` 匹配任意字符。 - `{8,}` 表示前面的 `.` 至少重复 8 次，即字符串长度至少为 8 个字符。 - **含义**：整个字符串的最小长度为 8。例如，`"Abc123"`（长度 6）不满足，而 `"Abc12345"`（长度 8）满足。 #### 3. **组合效果和示例** - **匹配条件总结**： - 至少一个大写字母（A-Z）。 - 至少一个小写字母（a-z）。 - 至少一个数字（0-9）。 - 长度至少 8 个字符（允许更长）。 - 字符类型不限（因为 `.` 匹配任意字符，包括符号如 `!@#$`）。 - **有效匹配示例**： - `"Password123"`：包含大写 P、小写 assword、数字 123，长度 11。 - `"Abc!12345"`：包含大写 A、小写 bc、数字 12345，以及符号 `!`，长度 9。 - **无效匹配示例**： - `"password"`：缺少大写字母和数字。 - `"PASSWORD123"`：缺少小写字母。 - `"Abc123"`：长度不足 8。 - `"!@#$%^&*"`：缺少字母和数字。 这个表达式确保了密码的基础强度，但未要求特殊字符（如符号），您可以根据需求扩展。类似的正则表达式设计原则在引用[3]中提到，强调“宁简勿繁”，即拆解复杂条件为多个简单断言以提升可读性和效率[^3]。 #### 4. **实际应用** - 在编程中，这个正则表达式可用于表单验证（如密码输入框）。例如，在 JavaScript 中： ```javascript const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/; console.log(regex.test("Abc12345")); // 输出 true console.log(regex.test("abc1234")); // 输出 false（缺少大写字母） ``` - 优点：使用先行断言能高效检查多个条件，无需嵌套或复杂逻辑。 - 局限性：它不检查字符类型重复（如多个数字），或特殊字符要求。如果需更严格规则（如包含符号），可追加断言，例如添加 `(?=.*[!@#$%^&*])`。 如果您有更多上下文（如具体代码实现），我可以提供更针对性的帮助。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值