ASCII码 ASCII码

轮播图：1: 实现鼠标悬停时自动停止播放, 离开时又自动播放 2 加上翻页按按钮,实现向前和向后翻页播放 。 实例演示 xhr对象的使用

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

轮播图

图片：

lunbo

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       }
  73.     </style>
  74.     <link
  75.       rel="stylesheet"
  76.       href="//at.alicdn.com/t/font_3280335_j9wms97sque.css"
  77.     />
  78.   </head>
  79.   <body>
  80.     <div class="slider">
  81.       <div class="imgs">
  82.         <img src="images/1.jpg" alt="" data-index="1" class="active" />
  83.         <img src="images/2.jpg" alt="" data-index="2" />
  84.         <img src="images/3.jpg" alt="" data-index="3" />
  85.         <img src="images/4.jpg" alt="" data-index="4" />
  86.         <img src="images/5.jpg" alt="" data-index="5" />
  87.       </div>
  88.       <div class="btns">
  89.         <span data-index="1" class="active" onclick="setActive()"></span>
  90.         <span data-index="2" onclick="setActive()"></span>
  91.         <span data-index="3" onclick="setActive()"></span>
  92.         <span data-index="4" onclick="setActive()"></span>
  93.         <span data-index="5" onclick="setActive()"></span>
  94.       </div>
  95.       <div class="page">
  96.         <button class="prev" onclick="setPage(1)">
  97.           <i class="iconfont icon-shangyige"></i>
  98.         </button>
  99.         <button class="next" onclick="setPage(2)">
  100.           <i class="iconfont icon-xiayige"></i>
  101.         </button>
  102.       </div>
  103.     </div>
  104.     <script>
  105.       const imgs = document.querySelectorAll(".slider .imgs img");
  106.       const btns = document.querySelectorAll(".slider .btns span");
  108.       let iNow = 0;
  109.       //清空class
  110.       function claerClass() {
  111.         imgs.forEach((img) => img.classList.remove("active"));
  112.         btns.forEach((btn) => btn.classList.remove("active"));
  113.       }
  114.       //添加样式：翻页、自动播放、点击btn按钮
  115.       function setActive(iNow) {
  116.         //调用清空class自定义函数
  117.         claerClass();
  118.         //if判断iNow !== undefined ：翻页、自动播放；else：点击btn按钮
  119.         if (iNow !== undefined) {
  120.           [...imgs].filter((img, index) => {
  121.             if (iNow === index) {
  122.               img.classList.add("active");
  123.             }
  124.           });
  125.           [...btns].filter((btn, index) => {
  126.             if (iNow === index) {
  127.               btn.classList.add("active");
  128.             }
  129.           });
  130.         } else {
  131.           event.target.classList.add("active");
  132.           imgs.forEach((img) => {
  133.             if (img.dataset.index === event.target.dataset.index) {
  134.               img.classList.add("active");
  135.             }
  136.           });
  137.         }
  138.       }
  140.       //自动播放函数
  141.       function setInteCanshu() {
  142.         iNow++;
  143.         if (iNow == btns.length) iNow = 0;
  144.         setActive(iNow);
  145.       }
  146.       //设置翻页
  147.       function setPage(ele) {
  148.         //   ele :1 上一页 2 下一页
  149.         if (ele === 2) {
  150.           iNow++;
  151.           if (iNow == imgs.length) iNow = 0;
  152.           setActive(iNow);
  153.         } else {
  154.           iNow--;
  155.           if (iNow == -1) iNow = imgs.length - 1;
  156.           setActive(iNow);
  157.         }
  158.       }
  159.       //间隔2秒执行一次自动函数
  160.       let setInte = setInterval(setInteCanshu, 2000);
  161.       //获取整个div
  162.       let slider = document.querySelector(".slider");
  163.       //鼠标悬停时自动停止播放
  164.       slider.onmouseover = () => clearInterval(setInte);
  165.       //离开时又自动播放
  166.       slider.onmouseout = () => (setInte = setInterval(setInteCanshu, 2000));
  167.     </script>
  168.   </body>
  169. </html>

实例演示ajax:xhr

代码：

  1. <script>
  2.       let url = "";
  3.       //ajax:xhr
  4.       function getUser() {
  5.         //创建对象
  6.         const xhr = new XMLHttpRequest();
  7.         //请求类型
  8.         xhr.response("json");
  9.         //配置参数
  10.         xhr.open("GET", url);
  11.         //请求成功
  12.         xhr.onload = () => {
  13.           console.log(xhr.response);
  14.         };
  15.         //请求失败
  16.         xhr.onerror = () => {
  17.           console.log("请求失败");
  18.         };
  19.         //发起请求
  20.         xhr.send(null);
  21.       }
  22.     </script>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行