![[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;position: relative;}.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;z-index: 99;}.slider .btns span.active {background-color: #fff;}/* 导航切换按钮 */.slider .imgs > span:first-of-type {width: 20px;height: 30px;border-radius: 50px 0 0 50px;background: rgba(0, 0, 0, 0.1);color: #f0f8ff;position: absolute;top: 60px;text-align: center;line-height: 25px;}.slider .imgs > span:last-of-type {width: 20px;height: 30px;border-radius: 0 50px 50px 0;background: rgba(0, 0, 0, 0.1);color: #f0f8ff;position: absolute;top: 60px;text-align: center;line-height: 25px;right: 0;}.slider .imgs > span:hover {background-color: red;cursor: pointer;}</style></head><body><div class="slider"><!--图片容器1. 图片组2. 按钮组注: 按钮数组与图片数量是一样的--><div class="imgs"><!-- 轮播图默认从第一张开始显示 --><span><</span><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" /><span>></span></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><script>// 1. 获取全部图片和按钮const imgs = document.querySelectorAll('.slider .imgs img');const btns = document.querySelectorAll('.slider .btns span');// 2. 设置激活状态function setActive() {// 1. 清空图片和所有按钮的激活状态imgs.forEach(img => img.classList.remove('active'));btns.forEach(btn => btn.classList.remove('active'));// 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 carousel = 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));//停止自动播放;document.querySelector('.slider .imgs').addEventListener('mouseover', () => {clearInterval(carousel);console.log('停止自动播放');});//开始自动播放document.querySelector('.slider .imgs').addEventListener('mouseout', () => {carousel = setInterval(arr => {let i = arr.shift();arr.push(i);btns[i].dispatchEvent(new Event('click'));},2000,Object.keys(btns));console.log('开始自动播放');});function name(params) {}//向左滚动let arrs = Object.keys(imgs);console.log(arrs);document.querySelector('.slider .imgs > span:first-of-type').addEventListener('click', () => {//尾部删除,头部添加let i = arrs.pop();arrs.unshift(i);console.log('当前索引', i);console.log(arrs);imgs.forEach((item, index) => {item.classList.remove('active');btns[index].classList.remove('active');});console.log('要添加的索引', arrs[0]);imgs[arrs[0]].classList.add('active');btns[arrs[0]].classList.add('active');});//向右滚动document.querySelector('.slider .imgs > span:last-of-type').addEventListener('click', () => {// 头部删除,尾部添加let i = arrs.shift();arrs.push(i);console.log('当前索引', i);console.log(arrs);imgs.forEach((item, index) => {item.classList.remove('active');btns[index].classList.remove('active');});console.log('要添加的索引', arrs[0]);imgs[arrs[0]].classList.add('active');btns[arrs[0]].classList.add('active');});// 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放// 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放</script></body></html>
// 1. 传统 XHR/*** 1. 创建对象: new XMLHttpRequest();* 2. 响应类型: xhr.responseType = "json";* 3. 配置参数: xhr.open("GET", url, true);* 4. 请求回调: xhr.onload = () => console.log(xhr.response);* 5. 失败回调: xhr.onerror = () => console.log("Error");* 6. 发起请求: xhr.send(null);** xhr 至少监听2个事件: load,error, 调用2个函数: open,send* post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同*/function getUser1(btn) {// 1. 创建xhr对象const xhr = new XMLHttpRequest;// 2. 响应类型xhr.responseType = 'json'// 3. 配置参数let url = 'http://xhr411.com/users.php?id=2'xhr.open('GET', url);// 4. 请求成功的回调xhr.onload = () => {// 返回的值console.log(xhr.response);//返回的值可以进行操作以及渲染到界面上}// 5. 请求失败的回调xhr.onerror = () => {// 返回的值console.log('请求错误');}// 6. 发起xhr请求xhr.send(null)}