ASCII码 ASCII码

轮播图,xhr

发布于：2022-04-14 13:39:13  栏目：技术文档

标悬停时自动停止播放, 离开时又自动播放

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>轮播图</title>
  8. </head>
  9. <style>
  11.     .slider {
  12.         width: 500px;
  13.         margin: auto;
  14.         padding: 0 10px;
  15.         margin-top:20px;
  16.     }
  18.     .slider .imgs {
  19.         /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  20.         height: 300px;
  21.     }
  23.     .slider .imgs img {
  24.         /* 图片完全充满父级空间显示 */
  25.         height: 100%;
  26.         width: 100%;
  28.         /* 默认图片全部隐藏,只有有active的图片才显示 */
  29.         display: none;
  30.     }
  32.     .slider .imgs img:hover {
  33.         cursor: pointer;
  34.     }
  36.     /* 默认显示第一张 */
  38.     .slider .imgs img.active {
  39.         display: block;
  40.     }
  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, 255);
  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: red;
  65.     }
  68. </style>
  69. <body>
  70.     <!-- 1.写个轮播图 -->
  71.     <!-- 2.写个图片盒子 -->
  72.     <!-- 3.写个按钮盒子 -->
  73.     <div class="slider">
  74.         <div class="imgs">
  75.             <img src="images/1.jpg" alt="" data-index="1">
  76.             <img src="images/2.jpg" alt="" data-index="2" class="active">
  77.             <img src="images/3.jpg" alt="" data-index="3">
  79.         </div>
  80.         <div class="btns">
  81.             <span data-index="1" onclick="setActive()" class="active"></span>
  82.             <span data-index="2" onclick="setActive()"></span>
  83.             <span data-index="3" onclick="setActive()"></span>
  84.         </div>
  85.     </div>
  86. </body>
  87. <script>
  88.     //获取图片按钮
  89.     const imgs = document.querySelectorAll('.slider .imgs img');
  90.     const btns = document.querySelectorAll('.slider .btns span');
  93.     //设置激活状态
  94.     function setActive() {
  95.         //1.获取到当前点击的按钮
  96.         console.log(event.target);
  98.         //2.把图片和按钮的active都清空
  99.         imgs.forEach((img) => img.classList.remove("active"))
  100.         btns.forEach(function (btn) {
  101.             btn.classList.remove('active');
  103.         })
  104.         //3.把active显示到当前点击的按钮上,和对应的data-index上
  105.         event.target.classList.add('active')
  106.         imgs.forEach(function (key) {
  107.             if (key.dataset.index === event.target.dataset.index) {
  108.                 key.classList.add('active')
  109.             }
  110.         })
  111.     }
  112.     //实现自动播放
  113.     //需要定时器   setInterval()除了回调和时间外,还可传入第三个参数,做为回调的参数
  115.     let sj = setInterval(function (arr) {
  116.         //1.头部删除
  117.         let a = arr.shift();
  119.         //2.尾部相加
  120.         arr.push(a);
  121.         //console.log(arr);
  122.         //.事件派发
  123.         btns[a].dispatchEvent(new Event('click'))
  125.     }, 2000, Object.keys(btns))
  126.     // console.log('这是按钮',Object.keys(btns))
  127.     // console.log('这是图片',Object.keys(imgs))
  131.     //当鼠标移动到图片时候停止轮播
  132.     //给定时器个变量
  133.     //获取当前图片盒子
  134.     const himg = document.querySelector('.slider .imgs');
  135.     console.log(himg);
  137.     //鼠标移动到当前盒子是清除定时器 mouseover(移入)
  138.     himg.addEventListener("mouseover", function () {
  139.         clearInterval(sj)
  140.         console.log('停止滚动')
  141.     });
  143.     //当鼠标离开是继续轮播
  144.     //获取当前图片盒子 上面以及获取到了我们直接拿来使用
  145.     //鼠标离开到当前盒子是继续轮播   mouseout(移除)
  146.     himg.addEventListener("mouseout", function () {
  147.         sj = setInterval(function (arr) {
  148.             let a = arr.shift();
  149.             arr.push(a);
  150.             btns[a].dispatchEvent(new Event('click'))
  152.         }, 2000, Object.keys(btns))
  153.         console.log('继续滚动')
  154.     })
  155.     //向左点击
  156.     //获取想左点击按钮
  157.     //
  159. </script>
  161. </html>

xhr演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>xhr.传参</title>
  8. </head>
  10. <body>
  12.     <button onclick="getUser1(this)">用户信息: xhr</button>
  13. </body>
  14. <script>
  15.     // 1. 传统 XHR
  17.     // 1. 创建对象: new XMLHttpRequest();
  18.     // 2. 响应类型: xhr.responseType = "json";
  19.     // 3. 配置参数: xhr.open("GET", url, true);
  20.     // 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  21.     // 5. 失败回调: xhr.onerror = () => console.log("Error");
  22.     // 6. 发起请求: xhr.send(null);
  24.     // xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  25.     // post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  27.        function getuser1() {
  28.           //1.创建对象:
  29.            const  xhr = new XMLHttpRequest();
  30.            // 2. 响应类型
  31.            xhr.responseType = "json";
  32.            // 3. 配置参数
  33.            let  url = "hhttp://xhr411.cc/users.php?id=2";
  34.            xhr.open("GET",url,)
  35.            // 4. 请求回调:
  36.            xhr.onload =    function() {
  37.             console.log(xhr.response)
  38.            }
  39.            //5.失败回调
  40.            xhr.onerror =  function () {
  41.                console.log('请求失败')
  43.            }
  44.            //6. 发起请求
  45.            xhr.send(null);
  46.        }
  47. </script>
  50. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行