From f60d4fcd6824e83b1fb10d7b760edd29123febc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B8=A9=E8=B4=B5=E9=9B=AF?= <2046174331@qq.com> Date: Thu, 14 Dec 2023 05:25:12 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 温贵雯 <2046174331@qq.com> --- ...7 \350\201\212\345\244\251\346\241\206.md" | 666 ++++++++++++++ ...76\344\271\246\347\256\241\347\220\206.md" | 240 +++++ .../20231213 jQuery.md" | 353 ++++++++ ...3 \351\200\211\346\213\251\345\231\250.md" | 828 ++++++++++++++++++ 4 files changed, 2087 insertions(+) create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231207 \350\201\212\345\244\251\346\241\206.md" create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231213 jQuery.md" create mode 100644 "10 \346\270\251\350\264\265\351\233\257/20231213 \351\200\211\346\213\251\345\231\250.md" diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231207 \350\201\212\345\244\251\346\241\206.md" "b/10 \346\270\251\350\264\265\351\233\257/20231207 \350\201\212\345\244\251\346\241\206.md" new file mode 100644 index 0000000..6af7236 --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231207 \350\201\212\345\244\251\346\241\206.md" @@ -0,0 +1,666 @@ +1. 什么是 AJAX ? [mdn](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started) + + * 使用浏览器的 XMLHttpRequest 对象 与服务器通信 + + * 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页 + + ![image-20230403173156484](images/image-20230403173156484.png) + +2. 什么是服务器？ + + * 可以暂时理解为提供数据的一台电脑 + +3. 为何学 AJAX ? + + * 以前我们的数据都是写在代码里固定的, 无法随时变化 + * 现在我们的数据可以从服务器上进行获取，让数据变活 + +4. 怎么学 AJAX ? + + * 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理 + * 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信 + +5. 需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用） + + > 获取省份列表数据 - 目标资源地址：http://hmajax.itheima.net/api/province + + * 完成效果： + + ![image-20230220113157010](images/image-20230220113157010.png) + +6. 接下来讲解 axios 语法，步骤： + + 1. 引入 axios.js 文件到自己的网页中 + + > axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js + + 2. 明确axios函数的使用语法 + + ```js + axios({ + url: '目标资源地址' + }).then((result) => { + // 对服务器返回的数据做后续处理 + }) + ``` + + > 注意：请求的 url 地址, 就是标记资源的网址 + > + > 注意：then 方法这里先体验使用，由来后续会讲到 + + + +7. 对应代码 + + ```html + + + + + + + + AJAX概念和axios使用 + + + + +

+ + + + + + ``` + + + +### 小结 + +1. AJAX 有什么用？ + +
+ 答案 + +
+ + + +2. AJAX 如何学： + +
+ 答案 + +
+ + + +3. 这一节 axios 体验步骤（语法）？ + +
+ 答案 + +
+ + + +## 02.认识 URL + +### 目标 + +了解 URL 的组成和作用 + + + +### 讲解 + +1. 为什么要认识 URL ? [mdn](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started) + + * 虽然是后端给我的一个地址，但是哪部分标记的是服务器电脑，哪部分标记的是资源呢？所以为了和服务器有效沟通我们要认识一下 + +2. 什么是 URL ？ + + * 统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等） + + ![image-20230403185206384](images/image-20230403185206384.png) + +3. URL 的组成? + + * 协议，域名，资源路径（URL 组成有很多部分，我们先掌握这3个重要的部分即可） + + ![image-20230403185305934](images/image-20230403185305934.png) + + + +4. 什么是 http 协议 ? + + * 叫超文本传输协议，规定了浏览器和服务器传递数据的格式（而格式具体有哪些稍后我们就会学到） + + ![image-20230403185356997](images/image-20230403185356997.png) + +5. 什么是域名 ? + + * 标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以 + + ![image-20230403185406674](images/image-20230403185406674.png) + +6. 什么是资源路径 ? + + * 一个服务器内有多个资源，用于标识你要访问的资源具体的位置 + + ![image-20230403185428276](images/image-20230403185428276.png) + +7. 接下来做个需求，访问新闻列表的 URL 网址，打印新闻数据 + + * 效果图如下： + + ![image-20230220122455915](images/image-20230220122455915.png) + + > 新闻列表数据 URL 网址：http://hmajax.itheima.net/api/news + + ```js + axios({ + url: 'http://hmajax.itheima.net/api/news' + }).then(result => { + console.log(result) + }) + ``` + + > url解释：从黑马服务器使用http协议，访问/api/news路径下的新闻列表资源 + + + +### 小结 + +1. URL 是什么？ + +
+ 答案 + +
+ + + +2. 请解释这个 URL，每个部分作用？ + + http://hmajax.itheima.net/api/news + +
+ 答案 + +
+ + + +## 03.URL 查询参数 + +### 目标 + +掌握-通过URL传递查询参数，获取匹配的数据 + + + +### 讲解 + +1. 什么是查询参数 ? + + * 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据 + * 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器 + + ![image-20230404101257205](images/image-20230404101257205.png) + +2. 查询参数的语法 ？ + + * 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2 + * 参数名一般是后端规定的，值前端看情况传递即可 + +3. axios 如何携带查询参数? + + * 使用 params 选项即可 + + ```js + axios({ + url: '目标资源地址', + params: { + 参数名: 值 + } + }).then(result => { + // 对服务器返回的数据做后续处理 + }) + ``` + + > 查询城市列表的 url地址：[http://hmajax.itheima.net/api/city](http://hmajax.itheima.net/api/city?pname=河北省) + > + > 参数名：pname （值要携带省份名字） + +4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码： + + ```html + + + + + + + 查询参数 + + + +

+ + + + + ``` + + + +## 作业 + +有点瑕疵，在按回车后不能清空信息 + +```html + + + + + + + + 聊天机器人 + + + + + + + + + + + + + + + + + + + + +
+ +
+ 9:41 +
+ + + +
+
+ +
+ + 使劲夸夸 +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + + + + +``` + diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" "b/10 \346\270\251\350\264\265\351\233\257/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" new file mode 100644 index 0000000..d5528cc --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231208 \345\233\276\344\271\246\347\256\241\347\220\206.md" @@ -0,0 +1,240 @@ +机器人 + +```html + +``` + + + +图书管理 + +```js +/** + * 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ + +//调用的是父亲 +// const tbody = document.querySelector('.list') + +const creator = '毛毛' +//封装。获取并渲染图书列表函数 +function getBooksList(){ +//1.1获取数值 +axios({ + url:'https://hmajax.itheima.net/api/books', + params:{ + //外号，获取对应数据 + creator + } +}).then(result =>{ + // console.log(result); + const bookLiist = result.data.data; + // console.log(bookLiist); + //渲染数据 + const htmlStr = bookLiist.map((item,index) => { + // const { author,bookname,publisher,id} = item; + return ` + + ${index+ 1} + ${item.bookname} + ${item.author} + ${item.publisher} + + 删除 + 编辑 + + + `; + }).join('') + document.querySelector('.list').innerHTML = htmlStr +}).catch(error =>{ + console.log(error); +}) + + + +} + +//打开网页就要先调用一次 +getBooksList() + + +// 目标2:实现图书的添加功能 +// 2.1 新增弹框=>显示和隐藏 +// 2.2 收集表单数据，并提交到服务器保存 +// 2.3 刷新图书列表 + +//创建弹窗对象 +//2.新增图书 + + const addModalDom = document.querySelector('.add-modal'); + const addModal = new bootstrap.Modal(addModalDom); + const addBtn = document.querySelector('.add-btn'); + + addBtn.addEventListener('click',()=>{ + //手机表单数据，并提交到服务器保存 + const addForm = document.querySelector('.add-form'); + const bookObj = serialize(addForm,{hash : true,empty : true}) + + //提交到服务器 + axios({ + url : 'http://hmajax.itheima.net/api/books', + method : 'POST', + data : { + ...bookObj, + creator + } + + }).then(result =>{ + + //添加成功后，重新渲染图书列表 + getBooksList(); + //重置表单 + addForm.reset(); + //隐藏弹框 + addModal.hide(); + }) + + }) + //删除操作 + document.querySelector('.list').addEventListener('click',e =>{ + if (e.target.classList.contains('del')) { + const theId = e.target.parentNode.dataset.id + //调用删除接口 + axios({ + url:`http://hmajax.itheima.net/api/books/${theId}`, + method : 'DELETE' + }).then(()=>{ + getBooksList() + }) + } + + }) + + // 创建弹窗对象 +const editBox=document.querySelector('.edit-modal') // 添加图书的弹窗对象 +const editmodal=new bootstrap.Modal(editBox) // modal对象，可以控制addBox显示或隐藏 +// 获取要收集的表单对象 +const editForm=document.querySelector('.edit-form') +// 保存按钮点击事件 +document.querySelector('.edit-btn').addEventListener('click',()=>{ +// 3.收集表单数据 + const book=serialize(editForm,{hash:true,empty:true}) + console.log(book); + // 4.调用接口提交数据 + axios({ + url:'http://hmajax.itheima.net/api/books', + method:'post', + data:{ + ...book, + creator + } + }).then(reault=>{ + console.log(reault); + // 隐藏弹窗 + editmodal.hide() + // 清空表单项 + editForm.reset() + // 成功的话，获取新数据并渲染 + getBooksList() + }) +}) +document.querySelector('.list').addEventListener('click',(e)=>{ + if (e.target.className==='edit') { + editmodal.show() //显示 + //获取图书的id + const id=e.target.parentNode.dataset.id + //通过id调用接口，获取对应的图书数据，回显到表单 + axios({ + url:'https://hmajax.itheima.net/api/books/'+ id //拼接字符串的形式 + + }).then(result=>{ + //console.log(result.data.data); + const book=result.data.data; + const {id,author,bookname,publisher}=book + editForm.querySelector('.publisher').value=publisher; + editForm.querySelector('.bookname').value=bookname; + editForm.querySelector('.author').value=author; + editForm.querySelector('.id').value=id; + + }) + + } +}) + +``` + + + + + + + diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231213 jQuery.md" "b/10 \346\270\251\350\264\265\351\233\257/20231213 jQuery.md" new file mode 100644 index 0000000..77feedc --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231213 jQuery.md" @@ -0,0 +1,353 @@ +### 笔记 + +**jQuery 库可以通过一行简单的标记被添加到网页中。** + +## jQuery 库 - 特性 + +jQuery 是一个 JavaScript 函数库。 + +jQuery 库包含以下特性： + +- HTML 元素选取 +- HTML 元素操作 +- CSS 操作 +- HTML 事件函数 +- JavaScript 特效和动画 +- HTML DOM 遍历和修改 +- AJAX +- Utilities + +## 向您的页面添加 jQuery 库 + +jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 + +可以通过下面的标记把 jQuery 添加到网页中： + +``` + + + +``` + +请注意， +``` + + + +```js +/** + * 目标1：图书列表 + * 1.获取数据 + * 2.渲染表格**/ + +//获取公用对象 +// const tbody = document.querySelector('.list'); + +//设置一个名字来接受数据,当你再次使用，记得改变名字，因为接口会记录名字 +const creator = '泰格瑞瑞123456'; + +//创建一个渲染函数 +function getBook(){ + //1.获取数据 + axios({ + url:'https://hmajax.itheima.net/api/books', + params:{ + creator + } + }).then(result => { + // console.log(result);//打印result + //找到这个接口的数据 + const bookList = result.data.data; + //将数据以接口里的数据以什么样的方式渲染出来 + const listStr = bookList.map((item,i) => { + //查看是否获得数据，并查看数据是否正确 + //console.log(item); + //拆解数据，方便书写 + const {id,author,bookname,publisher} = item ; + return ` + + ${i + 1} + ${author} + ${bookname} + ${publisher} + + 删除 + 编辑 + + + `; + }).join('') + + //将数据显示到tbody（网页）中 + //当你要用的时候记得想一下，你要得是什么格式 + $('.list')[0].innerHTML = listStr + }).catch(error => { + //浅浅打印一下 + // console.log(error); + }) + + + +} + +//先调用函数，使得展示什么样的效果 +//第一次打开网页就要加载一次 +getBook(); + +// 二、添加功能 +// 1.显示或隐藏弹窗 +// 2.保存按钮点击事件 +// 3.手机表单数据 +// 4.调用接口接收数据 +// 5.提交数据，并隐藏数据 +// 6.清空表单之前写的数据，（为了安全） +// 7.获取新数据并渲染在网页中 + +//创建弹窗对象 +//当class中的字段太多时，可以选择其中一个写，只要不与其他名字重合就行 +const addBox = document.querySelector('.add-modal'); + +//增加图书的弹窗对象 +//modal对象，可以控制addBox显示或隐藏 +//bootstrap 可以下来学习一下 +const modal = new bootstrap.Modal(addBox); + +//获取要收集的表单对象 +// const addForm = document.querySelector('.add-form'); + +//获取保存按钮 +// const addBtn = document.querySelector('.add-btn'); + +//保存按钮点击事件 +$('.add-btn').click(() => { + + + //添加是否要新增的提示 + if (!confirm('确定要新增吗？')) { + return //阻止往后运行 +} +//查看上面的if是否能使用 +// console.log('你确定要新增吗'); + //收集表单数据 + const book = serialize($('.add-form')[0],{ hash : true , empty : true }); + // console.log(book); + + //调用接口提交数据 + axios({ + url:'https://hmajax.itheima.net/api/books', + method:'post', + data:{ + ...book, + creator + } + }).then(result => { + + // console.log(result); + + //隐藏弹窗 + modal.hide() + + //清空表单里刚才填写的数据 + $('.add-form')[0].reset() + + //渲染新的数据，显示在网页中 + getBook() + + }) +}) + + +// 三、删除图书 +// 1.给删除点击事件 +// 2.获取图书的id（在渲染时添加的自定义属性） +// 3.通过id调用接口，删除对应的图书 +// 4.删除后再次渲染 + + +//将点击委托给tbody +$('.list').click((e) => { + //删除对象的两种方案 + //className === 'del' + //calssList.contains('del') + + if (e.target.classList.contains('del')) { + //删除前要确认一下是否真的要删除 + //返回布尔值 + if (!confirm('确定要删除吗？')) { + return //阻止往后运行 + } + //查看上面的if是否能使用 + console.log('你确定要删除吗'); + + // 获取图书的id + const id = e.target.parentNode.dataset.id; + + //调用接口 + axios({ + url: `https://hmajax.itheima.net/api/books/${id}`, + method:'delete' + }).then(result => { + + //删除后再次渲染 + getBook() + }) + } + +}) + + +//四、编辑图书 +// 1.显示编辑弹窗 +// 2.获取图书的id +// 3.通过id调用接口，获取对应的图书数据，回显到表单 +// 4.修改按钮点击事件 +// 5.收集表单数据 +// 6.调用接口提交数据 +// 7.提交数据，隐藏弹窗 +// 8.编辑后再次渲染 + +//创建弹窗当初 +const editBox = document.querySelector('.edit-modal'); + +//添加图书的弹窗对象 +//Modal对象，可以控制editBox的显示和隐藏 +const editModal = new bootstrap.Modal(editBox); + +//获取要收集的表单对象 +const editForm = document.querySelector('.edit-form'); +// console.log(editForm); + +// 给tbody添加点击事件，点击触发编辑弹窗 +$('.list').click((e) => { + //判断是否按到编辑按钮 + if (e.target.className === 'edit') { + //显示 + editModal.show(); + + //获取图书的id + const id = e.target.parentNode.dataset.id; + + //通过id调用接口，获取对应的图书数据，回显到表单 + axios({ + //拼接字符串的形式 + url:'https://hmajax.itheima.net/api/books/'+id, + + }).then(result => { + //打印，并查看数据 + // console.log(result.data.data); + + //获取数据（编辑的内容） + const book = result.data.data; + + //拆解数据，便捷书写 + const {id,author,bookname,publisher} = book + + //获取编辑表单的数据，将旧的数据替换成新的数据 + editForm.querySelector('.publisher').value = publisher; + editForm.querySelector('.bookname').value = bookname; + editForm.querySelector('.author').value = author; + editForm.querySelector('.id').value = id; + }) + } + }) + +//修改后，将数据发送到接口，并隐藏编辑弹窗 +//获取修改按钮 + // const editBtn = document.querySelector('.edit-btn'); + // editBtn.innerHTML = '保存' + + $('.edit-btn')[0].click(() => { + + //添加是否要修改的提示 + if (!confirm('确定要修改吗？')) { + return //阻止往后运行 + } + //查看上面的if是否能使用 + // console.log('你确定要修改吗'); + //收集表单数据 + const book = serialize(editForm,{ hash : true , empty : true }) + + //拆解数据，便捷书写 + const {id,author,bookname,publisher} = book ; + // console.log(book); + + //调用接口提交数据 + axios({ + url:'https://hmajax.itheima.net/api/books/'+id, + method:'put', + data:{ + ...book, + creator + } + }).then(result => { + // console.log(result); + //隐藏弹窗 + editModal.hide(); + + //渲染 + getBook(); + }) + }) + + + + + + + + +``` + diff --git "a/10 \346\270\251\350\264\265\351\233\257/20231213 \351\200\211\346\213\251\345\231\250.md" "b/10 \346\270\251\350\264\265\351\233\257/20231213 \351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000..5bc757a --- /dev/null +++ "b/10 \346\270\251\350\264\265\351\233\257/20231213 \351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,828 @@ +## 笔记 + +**### 3 选择器** + + + +\```js + +

我是一个标题

+ +

我是有id的p段落

+ + + +\``` + + + +**### 4 jQuery事件** + + + +***\*****1.js事件回顾*****\*** + + + +\```js + +javascript事件 + +​ 1.以on开头，比如鼠标单击事件onclick，onchange,onready,onblur,oninput, + +​ javascript事件一般通过注册事件句柄实现绑定 + +​ 2.js事件通常是一个函数，通过事件驱动执行，js函数内部可以使用jquery方式进行选中元素 + +​ 3.位置：js事件函数写在标签内，ready()外 + +​ + +​ 定义onclick事件函数 + +​ + +​ + +​ + +​ function jsClick(){ + +​ alert("js鼠标单击事件..."); + +​ // 使用jquery选中选中其它元素 + +​ $("#myText").css("background-color","red"); + +​ } + + + +\``` + + + +***\*****2.jQuery事件*****\*** + + + +\```js + +/* + +​ jquery事件： + +​ 1.没有on，直接以js事件去掉相应的on即可 + +​ 2.位置：ready()内 + +​ ready(function){ + +​ $("jquery选择器").事件类型(function(){ + +​ 事件体... + +​ }) + +​ } + +​ */ + +​ $(document).ready(function(){ + +​ // 鼠标单击事件 + +​ $("#myButton").click(function(){ + +​ $("#myText").css("background-color","red"); + +​ }) + +​ })// ready()结束标记 + + + +\``` + + + +***\*****3.常见的jQuery事件*****\*** + + + +\```js + +​ 鼠标事件 + +​ -click：鼠标单击 + +​ -- dblclick 双击 + +​ -mouseover：鼠标进入（进入子元素也会触发） + +​ -mouseout：鼠标离开（离开子元素也会触发） + +​ -focus：元素获得焦点 + +​ -blur：元素失去焦点 + +​ + +​ 键盘事件 + +​ -keydown：键盘按下事件，从上到下的过程 + +​ -keyup：松开键盘 + +​ -keypress：键盘被按到最底部 + +​ 绑定事件 + +​ 1.形式 addEventLister("事件名",函数) + +​ $("jquery选择器").bind("事件名",函数) + +​ 好处：更加通用 + +​ 2.多组事件绑定： + +​ $("jquery选择器").bind({"事件名":函数，"事件名":函数，"事件名":函数，}) + +​ + + + +显示效果： + +​ -show(参数1，参数2)：显示 + +​ -hide(参数1，参数2)：隐藏 + + + + + +​ -fadeIn(参数1，参数2)：淡入 + +​ -slideDown(参数1，参数2)：展开 + +​ 关于参数：参数1表示速度，可选值有slow、fast、normal + +​ 参数2表示回调函数 + +​ 隐藏效果： + +​ + +​ -fadeOut(参数1，参数2)：淡出 + +​ -slideUp(参数1，参数2)：拉升 (压缩) + +​ + +​ $("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数 + +​ $("p").unbind( "click" ) //解绑一个事件 + + + +\``` + + + +**### 5 jQuery操作DOM对象** + + + +***\*****1.jQuery操作样式*****\*** + + + +\```js + +i.设置css + +​ 获取对象的某个样式的属性对应的值jquery对象.css("属性名") style + +​ 设置单个样式：jquery对象.css("属性名","属性值") + +​ 设置多个样式：jquery对象.css({"属性名":"属性值",属性名":"属性值,属性名":"属性值}) + +classList.add .remove toggle .contains + +ii.追加或移出预定义样式 + +​ addClass("xxx")：追加单个属性 + +​ addClass("xxx xxx xxx")：追加多个属性 + +​ removeClass("xxx")：移除单个属性 + +​ removeClass("xxx xxx xxx")：移除多个属性 + +​ toggleClass("xxx xxx xxx")：轮换属性 + +​ 可以在style标签预定义一些样式，通过add或remove方法进行追加或移除属性 + + + +\``` + + + +***\*****2.jQuery操作内容*****\*** + + + +\```js + +i.jquery操作DOM之内容 + +​ 取值(文本)： + +​ html()：获取值，获取的是元素的内容，包括元素内部的各种标签 innerHTML + +​ text()：获取值，只获取内容值，不包括各种标签 innerText + +​ 赋值： + +​ html("xxx")：先渲染，后显示 innerHTML= xxx + +​ text("xxx")：原封不动显示，不进行渲染 innerText = xxx + +​ + +​ 表单的： + +​ val()：获取属性值 .value + +​ val("xxx")：赋值 .value =xxx + + + +## 作业 + +tab栏切换 + +```html + + + + + + + + tab栏切换 + + + + +
+
+

每日特价

+ +
+
+
+
+
+
+
+
+
+ + + + + + +``` + +轮播图 + +```html + + + + + + + + 轮播图点击切换 + + + + +
+
+ +
+
+

对人类来说会不会太超前了？

+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+ + +
+
+
+ + + + + +``` + -- Gitee