search

博客列表 >轮播图实例与xhr对象的使用

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

天宁
天宁原创
2022年04月12日 19:30:22379浏览

轮播图实例

代码

  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.                 position: relative;
  22.             }
  24.             .slider .imgs img {
  25.                 /* 图片完全充满父级空间显示 */
  26.                 height: 100%;
  27.                 width: 100%;
  28.                 /* 图片带有圆角 */
  29.                 border-radius: 10px;
  30.                 /* 默认图片全部隐藏,只有有active的图片才显示 */
  31.                 display: none;
  32.             }
  34.             .slider .imgs img:hover {
  35.                 cursor: pointer;
  36.             }
  37.             /* 默认显示第一张 */
  39.             .slider .imgs img.active {
  40.                 display: block;
  41.             }
  42.             /* 轮播图按钮组 */
  44.             .slider .btns {
  45.                 /* 按钮水平一排显示,用flex,且水平居中 */
  46.                 display: flex;
  47.                 place-content: center;
  48.             }
  50.             .slider .btns span {
  51.                 /* 按钮宽高相同,确定显示成一个正圆 */
  52.                 width: 8px;
  53.                 height: 8px;
  54.                 /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  55.                 background-color: rgba(255, 255, 255, 0.4);
  56.                 /* 50%可确保显示为正圆 */
  57.                 border-radius: 50%;
  58.                 /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  59.                 margin: -12px 3px 5px;
  60.                 z-index: 99;
  61.             }
  63.             .slider .btns span.active {
  64.                 background-color: #fff;
  65.             }
  67.             /* 导航切换按钮 */
  68.             .slider .imgs > span:first-of-type {
  69.                 width: 20px;
  70.                 height: 30px;
  71.                 border-radius: 50px 0 0 50px;
  72.                 background: rgba(0, 0, 0, 0.1);
  73.                 color: #f0f8ff;
  74.                 position: absolute;
  75.                 top: 60px;
  76.                 text-align: center;
  77.                 line-height: 25px;
  78.             }
  80.             .slider .imgs > span:last-of-type {
  81.                 width: 20px;
  82.                 height: 30px;
  83.                 border-radius: 0 50px 50px 0;
  84.                 background: rgba(0, 0, 0, 0.1);
  85.                 color: #f0f8ff;
  86.                 position: absolute;
  87.                 top: 60px;
  88.                 text-align: center;
  89.                 line-height: 25px;
  90.                 right: 0;
  91.             }
  93.             .slider .imgs > span:hover {
  94.                 background-color: red;
  95.                 cursor: pointer;
  96.             }
  97.         </style>
  98.     </head>
  100.     <body>
  101.         <div class="slider">
  102.             <!-- 
  103.             图片容器
  104.             1. 图片组
  105.             2. 按钮组
  106.             注: 按钮数组与图片数量是一样的
  107.          -->
  108.             <div class="imgs">
  109.                 <!-- 轮播图默认从第一张开始显示 -->
  110.                 <span>&lt;</span>
  111.                 <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  112.                 <img src="./images/banner2.jpg" alt="" data-index="2" />
  113.                 <img src="./images/banner3.png" alt="" data-index="3" />
  114.                 <span>&gt;</span>
  115.             </div>
  116.             <!-- 切换按钮数量与图片数量必须一致 -->
  117.             <div class="btns">
  118.                 <span data-index="1" class="active" onclick="setActive()"></span>
  119.                 <span data-index="2" onclick="setActive()"></span>
  120.                 <span data-index="3" onclick="setActive()"></span>
  121.             </div>
  122.         </div>
  124.         <script>
  125.             // 1. 获取全部图片和按钮
  126.             const imgs = document.querySelectorAll('.slider .imgs img');
  127.             const btns = document.querySelectorAll('.slider .btns span');
  129.             // 2. 设置激活状态
  130.             function setActive() {
  131.                 // 1. 清空图片和所有按钮的激活状态
  132.                 imgs.forEach(img => img.classList.remove('active'));
  133.                 btns.forEach(btn => btn.classList.remove('active'));
  135.                 // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
  136.                 event.target.classList.add('active');
  137.                 imgs.forEach(img => {
  138.                     if (img.dataset.index === event.target.dataset.index) {
  139.                         img.classList.add('active');
  140.                     }
  141.                 });
  142.             }
  144.             // 3. 自动播放
  145.             // [1,2,3]
  146.             // [2,3,1]
  147.             // [3,1,2]
  148.             // [1,2,3]
  149.             // 首尾相连,实现循环播放
  150.             // 自动点击: 事件派发器
  152.             // 间歇式触发,每隔一段固定时间会自动触发一次事件
  153.             // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
  154.             let carousel = setInterval(
  155.                 arr => {
  156.                     // 1. 头部删除
  157.                     let i = arr.shift();
  158.                     // 2. 尾部追加
  159.                     arr.push(i);
  160.                     // 3. 事件派发: 模拟用户点击
  161.                     btns[i].dispatchEvent(new Event('click'));
  162.                 },
  163.                 2000,
  164.                 Object.keys(btns)
  165.             );
  166.             // console.log(Object.keys(btns));
  167.             // console.log(Object.keys(imgs));
  169.             //停止自动播放;
  170.             document.querySelector('.slider .imgs').addEventListener('mouseover', () => {
  171.                 clearInterval(carousel);
  172.                 console.log('停止自动播放');
  173.             });
  174.             //开始自动播放
  175.             document.querySelector('.slider .imgs').addEventListener('mouseout', () => {
  176.                 carousel = setInterval(
  177.                     arr => {
  178.                         let i = arr.shift();
  179.                         arr.push(i);
  180.                         btns[i].dispatchEvent(new Event('click'));
  181.                     },
  182.                     2000,
  183.                     Object.keys(btns)
  184.                 );
  185.                 console.log('开始自动播放');
  186.             });
  188.             function name(params) {}
  190.             //向左滚动
  191.             let arrs = Object.keys(imgs);
  192.             console.log(arrs);
  193.             document.querySelector('.slider .imgs > span:first-of-type').addEventListener('click', () => {
  194.                 //尾部删除,头部添加
  195.                 let i = arrs.pop();
  196.                 arrs.unshift(i);
  197.                 console.log('当前索引', i);
  198.                 console.log(arrs);
  199.                 imgs.forEach((item, index) => {
  200.                     item.classList.remove('active');
  201.                     btns[index].classList.remove('active');
  202.                 });
  203.                 console.log('要添加的索引', arrs[0]);
  204.                 imgs[arrs[0]].classList.add('active');
  205.                 btns[arrs[0]].classList.add('active');
  206.             });
  208.             //向右滚动
  209.             document.querySelector('.slider .imgs > span:last-of-type').addEventListener('click', () => {
  210.                 // 头部删除,尾部添加
  211.                 let i = arrs.shift();
  212.                 arrs.push(i);
  213.                 console.log('当前索引', i);
  214.                 console.log(arrs);
  215.                 imgs.forEach((item, index) => {
  216.                     item.classList.remove('active');
  217.                     btns[index].classList.remove('active');
  218.                 });
  219.                 console.log('要添加的索引', arrs[0]);
  220.                 imgs[arrs[0]].classList.add('active');
  221.                 btns[arrs[0]].classList.add('active');
  222.             });
  223.             // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
  224.             // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
  225.         </script>
  226.     </body>
  227. </html>

XHR对象的使用

  1. // 1. 传统 XHR
  2.         /**
  3.          * 1. 创建对象: new XMLHttpRequest();
  4.          * 2. 响应类型: xhr.responseType = "json";
  5.          * 3. 配置参数: xhr.open("GET", url, true);
  6.          * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  7.          * 5. 失败回调: xhr.onerror = () => console.log("Error");
  8.          * 6. 发起请求: xhr.send(null);
  9.          *
  10.          * xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  11.          * post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  12.          */
  14.         function getUser1(btn) {
  15.             // 1. 创建xhr对象
  16.             const xhr = new XMLHttpRequest;
  18.             // 2. 响应类型
  19.             xhr.responseType = 'json'
  21.             // 3. 配置参数
  22.             let url = 'http://xhr411.com/users.php?id=2'
  23.             xhr.open('GET', url);
  25.             // 4. 请求成功的回调
  26.             xhr.onload = () => {
  27.                     // 返回的值
  28.                     console.log(xhr.response);
  29.                     //返回的值可以进行操作以及渲染到界面上
  30.                 }
  31.                 // 5. 请求失败的回调
  32.             xhr.onerror = () => {
  33.                     // 返回的值
  34.                     console.log('请求错误');
  35.                 }
  36.                 // 6. 发起xhr请求
  37.             xhr.send(null)
  38.         }
上一条：asp判断某个文件是否存在的函数下一条：轮播图实例演示,XHR 对象的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多