![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><style>/* ! 3. 轮播图 */.slider {max-width: 750px;min-width: 320px;margin: auto;padding: 0 10px;}.slider .imgs {/* 图片容器必须要有高度,否则下面图片不能正常显示 */height: 150px;}.slider .imgs img {/* 图片完全充满父级空间显示 */height: 100%;width: 100%;/* 图片带有圆角 */border-radius: 10px;/* 默认图片全部隐藏,只有有active的图片才显示 */display: none;}.slider .imgs img:hover {cursor: pointer;}/* 默认显示第一张 */.slider .imgs img.active {display: block;}/* 轮播图按钮组 */.slider .btns {/* 按钮水平一排显示,用flex,且水平居中 */display: flex;place-content: center;}.slider .btns span {/* 按钮宽高相同,确定显示成一个正圆 */width: 8px;height: 8px;/* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */background-color: rgba(255, 255, 255, 0.4);/* 50%可确保显示为正圆 */border-radius: 50%;/* 按钮上外边距负值,可将它上移,可移动到图片中下方 */margin: -12px 3px 5px;}.slider .btns span.active {background-color: #fff;}.slider .page {display: flex;place-content: space-between;margin-top: -88px;opacity: 0.3;}.slider .page button {border: none;width: 20px;height: 20px;background-color: #fff;}</style></head><body><div class="slider"><!--图片容器1. 图片组2. 按钮组注: 按钮数组与图片数量是一样的--><div class="imgs"><!-- 轮播图默认从第一张开始显示 --><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /><img src="./images/banner2.jpg" alt="" data-index="2" /><img src="./images/banner3.png" alt="" data-index="3" /></div><!-- 切换按钮数量与图片数量必须一致 --><div class="btns"><span data-index="1" class="active" onclick="setActive()"></span><span data-index="2" onclick="setActive()"></span><span data-index="3" onclick="setActive()"></span></div><!-- 上下翻页按钮 --><div class="page"><button class="prev" onclick="setPage(1)"></button><button class="next" onclick="setPage(2)"></button></div></div><script>// 1. 获取全部图片和按钮const imgs = document.querySelectorAll('.slider .imgs img');const btns = document.querySelectorAll('.slider .btns span');// 2.清空图片和所有按钮的激活状态function clearClass() {imgs.forEach((img) => img.classList.remove('active'));btns.forEach((btn) => btn.classList.remove('active'));}// 2. 设置激活状态function setActive() {// 1. 清空图片和所有按钮的激活状态clearClass();// 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=activeevent.target.classList.add('active');imgs.forEach((img) => {if (img.dataset.index === event.target.dataset.index) {img.classList.add('active');}});}// 3. 自动播放// [1,2,3]// [2,3,1]// [3,1,2]// [1,2,3]// 首尾相连,实现循环播放// 自动点击: 事件派发器// 间歇式触发,每隔一段固定时间会自动触发一次事件// setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数let play = setInterval((arr) => {// 1. 头部删除let i = arr.shift();// 2. 尾部追加arr.push(i);// 3. 事件派发: 模拟用户点击btns[i].dispatchEvent(new Event('click'));},2000,Object.keys(btns));// console.log(Object.keys(btns));// console.log(Object.keys(imgs));let arrs = Object.keys(imgs);// 翻页效果function setPage(ele) {clearClass();// 上一页if (ele === 1) {// 尾部删除，头部添加let i = arrs.pop();arrs.unshift(i);btns[i].dispatchEvent(new Event('click'));}// 下一页else {// 头部删除，尾部添加let i = arrs.shift();arrs.push(i);btns[i].dispatchEvent(new Event('click'));}}//停止自动播放;document.querySelector('.slider .imgs').addEventListener('mouseover', () => {clearInterval(play);console.log('停止自动播放');});//开始自动播放document.querySelector('.slider .imgs').addEventListener('mouseout', () => {play = setInterval((arr) => {let i = arr.shift();arr.push(i);btns[i].dispatchEvent(new Event('click'));},2000,Object.keys(btns));console.log('开始自动播放');});</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-XHR</title></head><body><button onclick="getUser(this)">用户信息: xhr</button><script>function getUser(btn) {// 1. 创建xhr对象const xhr = new XMLHttpRequest;// 2. 响应类型xhr.responseType = 'json'// 3. 配置参数let url = 'http://127.0.0.21/users.php?id=3'xhr.open('GET', url);// 4. 请求成功的回调xhr.onload = () => {// 返回的值console.log(xhr.response);}// 5. 请求失败的回调xhr.onerror = () => {// 返回的值console.log('请求错误');}// 6. 发起xhr请求xhr.send(null)}</script></body></html>