ASCII码 ASCII码

轮播图实例和xhr对象的使用

发布于：2022-06-08 09:03:43  栏目：技术文档

1.轮播图实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <style>
  9.       /* ! 3. 轮播图 */
  11.       .slider {
  12.         max-width: 750px;
  13.         min-width: 320px;
  14.         margin: auto;
  15.         padding: 0 10px;
  16.       }
  18.       .slider .imgs {
  19.         /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  20.         height: 150px;
  21.       }
  23.       .slider .imgs img {
  24.         /* 图片完全充满父级空间显示 */
  25.         height: 100%;
  26.         width: 100%;
  27.         /* 图片带有圆角 */
  28.         border-radius: 10px;
  29.         /* 默认图片全部隐藏,只有有active的图片才显示 */
  30.         display: none;
  31.       }
  33.       .slider .imgs img:hover {
  34.         cursor: pointer;
  35.       }
  36.       /* 默认显示第一张 */
  38.       .slider .imgs img.active {
  39.         display: block;
  40.       }
  41.       /* 轮播图按钮组 */
  43.       .slider .btns {
  44.         /* 按钮水平一排显示,用flex,且水平居中 */
  45.         display: flex;
  46.         place-content: center;
  47.       }
  49.       .slider .btns span {
  50.         /* 按钮宽高相同,确定显示成一个正圆 */
  51.         width: 8px;
  52.         height: 8px;
  53.         /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  54.         background-color: rgba(255, 255, 255, 0.4);
  55.         /* 50%可确保显示为正圆 */
  56.         border-radius: 50%;
  57.         /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  58.         margin: -12px 3px 5px;
  59.       }
  61.       .slider .btns span.active {
  62.         background-color: #fff;
  63.       }
  64.       .slider .page {
  65.         display: flex;
  66.         place-content: space-between;
  67.         margin-top: -88px;
  68.         opacity: 0.3;
  69.       }
  70.       .slider .page button {
  71.         border: none;
  72.         width: 20px;
  73.         height: 20px;
  74.         background-color: #fff;
  75.       }
  76.     </style>
  77.   </head>
  79.   <body>
  80.     <div class="slider">
  81.       <!-- 
  82.             图片容器
  83.             1. 图片组
  84.             2. 按钮组
  85.             注: 按钮数组与图片数量是一样的
  86.          -->
  87.       <div class="imgs">
  88.         <!-- 轮播图默认从第一张开始显示 -->
  89.         <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  90.         <img src="./images/banner2.jpg" alt="" data-index="2" />
  91.         <img src="./images/banner3.png" alt="" data-index="3" />
  92.       </div>
  93.       <!-- 切换按钮数量与图片数量必须一致 -->
  94.       <div class="btns">
  95.         <span data-index="1" class="active" onclick="setActive()"></span>
  96.         <span data-index="2" onclick="setActive()"></span>
  97.         <span data-index="3" onclick="setActive()"></span>
  98.       </div>
  99.       <!-- 上下翻页按钮 -->
  100.       <div class="page">
  101.         <button class="prev" onclick="setPage(1)"></button>
  102.         <button class="next" onclick="setPage(2)"></button>
  103.       </div>
  104.     </div>
  106.     <script>
  107.       // 1. 获取全部图片和按钮
  108.       const imgs = document.querySelectorAll('.slider .imgs img');
  109.       const btns = document.querySelectorAll('.slider .btns span');
  111.       // 2.清空图片和所有按钮的激活状态
  112.       function clearClass() {
  113.         imgs.forEach((img) => img.classList.remove('active'));
  114.         btns.forEach((btn) => btn.classList.remove('active'));
  115.       }
  116.       // 2. 设置激活状态
  117.       function setActive() {
  118.         // 1. 清空图片和所有按钮的激活状态
  119.         clearClass();
  121.         // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
  122.         event.target.classList.add('active');
  123.         imgs.forEach((img) => {
  124.           if (img.dataset.index === event.target.dataset.index) {
  125.             img.classList.add('active');
  126.           }
  127.         });
  128.       }
  130.       // 3. 自动播放
  131.       // [1,2,3]
  132.       // [2,3,1]
  133.       // [3,1,2]
  134.       // [1,2,3]
  135.       // 首尾相连,实现循环播放
  136.       // 自动点击: 事件派发器
  138.       // 间歇式触发,每隔一段固定时间会自动触发一次事件
  139.       // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
  140.       let play = setInterval(
  141.         (arr) => {
  142.           // 1. 头部删除
  143.           let i = arr.shift();
  144.           // 2. 尾部追加
  145.           arr.push(i);
  146.           // 3. 事件派发: 模拟用户点击
  147.           btns[i].dispatchEvent(new Event('click'));
  148.         },
  149.         2000,
  150.         Object.keys(btns)
  151.       );
  152.       // console.log(Object.keys(btns));
  153.       // console.log(Object.keys(imgs));
  154.       let arrs = Object.keys(imgs);
  155.       // 翻页效果
  156.       function setPage(ele) {
  157.         clearClass();
  158.         // 上一页
  159.         if (ele === 1) {
  160.           // 尾部删除，头部添加
  161.           let i = arrs.pop();
  162.           arrs.unshift(i);
  163.           btns[i].dispatchEvent(new Event('click'));
  164.         }
  165.         // 下一页
  166.         else {
  167.           // 头部删除，尾部添加
  168.           let i = arrs.shift();
  169.           arrs.push(i);
  170.           btns[i].dispatchEvent(new Event('click'));
  171.         }
  172.       }
  174.       //停止自动播放;
  175.       document
  176.         .querySelector('.slider .imgs')
  177.         .addEventListener('mouseover', () => {
  178.           clearInterval(play);
  179.           console.log('停止自动播放');
  180.         });
  181.       //开始自动播放
  182.       document
  183.         .querySelector('.slider .imgs')
  184.         .addEventListener('mouseout', () => {
  185.           play = setInterval(
  186.             (arr) => {
  187.               let i = arr.shift();
  188.               arr.push(i);
  189.               btns[i].dispatchEvent(new Event('click'));
  190.             },
  191.             2000,
  192.             Object.keys(btns)
  193.           );
  194.           console.log('开始自动播放');
  195.         });
  196.     </script>
  197.   </body>
  198. </html>

轮播图

2.xhr对象的使用

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ajax-XHR</title>
  8. </head>
  9. <body>
  10.     <button onclick="getUser(this)">用户信息: xhr</button>
  11.     <script>
  12.         function getUser(btn) {
  13.             // 1. 创建xhr对象
  14.             const xhr = new XMLHttpRequest;
  15.             // 2. 响应类型
  16.             xhr.responseType = 'json'
  17.             // 3. 配置参数
  18.             let url = 'http://127.0.0.21/users.php?id=3'
  19.             xhr.open('GET', url);
  20.             // 4. 请求成功的回调
  21.             xhr.onload = () => {
  22.                 // 返回的值
  23.                 console.log(xhr.response);
  24.             }
  25.             // 5. 请求失败的回调
  26.             xhr.onerror = () => {
  27.                 // 返回的值
  28.                 console.log('请求错误');
  29.             }
  30.             // 6. 发起xhr请求
  31.             xhr.send(null)
  32.         }
  33.     </script>
  34. </body>
  35. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行