search

博客列表 >鼠标悬停时自动停止播放, 离开时又自动播放 ，给这个轮播图加上翻页按按钮,实现向前和向后翻页播放 ，演示 xhr对象的使用

鼠标悬停时自动停止播放, 离开时又自动播放 ，给这个轮播图加上翻页按按钮,实现向前和向后翻页播放 ，演示 xhr对象的使用

Blackeye
Blackeye原创
2022年04月12日 13:53:13516浏览

1
2

  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.         transition: width 0.5s;
  17.       }
  19.       .slider .imgs {
  20.         /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  21.         height: 200px;
  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.       }
  62.       .slider .btns span.active {
  63.         background-color: #fff;
  64.       }
  66.       .slider .side {
  67.         box-sizing: border-box;
  68.         display: flex;
  69.         place-content: space-between;
  70.         font-size: 20px;
  71.         color: #fff;
  72.       }
  73.       .slider .side .leftside {
  74.         display: flex;
  75.         align-items: center;
  76.         place-content: center;
  77.         width: 25px;
  78.         height: 40px;
  79.         border-radius: 8px;
  80.         background-color: rgba(255, 255, 255, 0.4);
  81.         margin: -120px 1px 0px;
  82.       }
  84.       .slider .side .leftside:hover {
  85.         cursor: pointer;
  86.         background-color: red;
  87.       }
  89.       .slider .side .rightside {
  90.         display: flex;
  91.         align-items: center;
  92.         place-content: center;
  93.         width: 25px;
  94.         height: 40px;
  95.         border-radius: 8px;
  96.         background-color: rgba(255, 255, 255, 0.4);
  97.         margin: -120px 1px 0px;
  98.       }
  100.       .slider .side .rightside:hover {
  101.         cursor: pointer;
  102.         background-color: red;
  103.       }
  104.     </style>
  105.   </head>
  106.   <body>
  107.     <div class="slider">
  108.       <!-- 
  109.             图片容器
  110.             1. 图片组
  111.             2. 按钮组
  112.             注: 按钮数组与图片数量是一样的
  113.          -->
  114.       <div class="imgs" onmouseleave="autoPlay()" onmouseover="pause()">
  115.         <!-- 轮播图默认从第一张开始显示 -->
  116.         <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  117.         <img src="./images/banner2.jpg" alt="" data-index="2" />
  118.         <img src="./images/banner3.png" alt="" data-index="3" />
  119.       </div>
  120.       <!-- 切换按钮数量与图片数量必须一致 -->
  121.       <div class="btns" onmouseleave="autoPlay()" onmouseover="pause()">
  122.         <span data-index="1" class="active" onclick="setActive()"></span>
  123.         <span data-index="2" onclick="setActive()"></span>
  124.         <span data-index="3" onclick="setActive()"></span>
  125.       </div>
  126.       <!-- 左右切换按钮 -->
  127.       <div class="side" onmouseleave="autoPlay()" onmouseover="pause()">
  128.         <div class="leftside" onclick="sideclick()">&lt;</div>
  129.         <div class="rightside" onclick="sideclick()">&gt;</div>
  130.       </div>
  131.     </div>
  132.   </body>
  133.   <script>
  134.     const imgList = document.querySelectorAll(".imgs img");
  135.     const btnList = document.querySelectorAll(".btns span");
  136.     let dataList = [...imgList].map((item) => item.dataset.index);
  137.     const tempIndex = dataList.shift();
  138.     dataList.push(tempIndex);
  139.     let playMain = null;
  141.     function cleanActive() {
  142.       // 清空active
  143.       [...imgList].forEach((item) => item.classList.remove("active"));
  144.       [...btnList].forEach((item) => item.classList.remove("active"));
  145.     }
  147.     function setActive() {
  148.       cleanActive();
  149.       // 切换active
  150.       [...imgList].filter((item) => {
  151.         if (item.dataset.index === event.currentTarget.dataset.index) {
  152.           item.classList.add("active");
  153.         }
  154.       });
  155.       [...btnList].filter((item) => {
  156.         if (item.dataset.index === event.currentTarget.dataset.index) {
  157.           item.classList.add("active");
  158.         }
  159.       });
  160.     }
  161.     function pause() {
  162.       clearInterval(playMain);
  163.     }
  164.     function autoPlayRender(tempIndex){
  165.         cleanActive();
  166.       [...imgList].filter((item) => {
  167.         if (item.dataset.index === tempIndex) {
  168.           item.classList.add("active");
  169.         }
  170.       });
  171.       [...btnList].filter((item) => {
  172.         if (item.dataset.index === tempIndex) {
  173.           item.classList.add("active");
  174.         }
  175.       });
  176.     }
  178.     function autoPlay() {
  179.     playMain = setInterval(() => {
  180.       const tempIndex = dataList.shift();
  181.       // console.log(typeof parseInt(tempIndex));
  182.       dataList.push(tempIndex);
  183.       autoPlayRender(tempIndex);
  184.     }, 3000);
  185.     }
  186.     function sideclick(){
  187.         if(event.currentTarget.className==="leftside"){
  188.             const tempIndex = dataList.pop();
  189.             dataList.unshift(tempIndex);
  190.             autoPlayRender(tempIndex);
  191.         }else{
  192.             const tempIndex = dataList.shift();
  193.             dataList.push(tempIndex);
  194.             autoPlayRender(tempIndex);
  195.         }
  196.     }
  197.     window.onload = autoPlay;
  198.   </script>
  199. </html>
  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>Ajax-XHR</title>
  8.   </head>
  9.   <body>
  10.     <button onclick="getUser(this)">用户信息：xhr</button>
  11.   </body>
  12.   <script>
  13.     function getUser() {
  14.       // 1.创建xhr对象
  15.       const xhr = new XMLHttpRequest();
  16.       const url = "http://xhr411.edu/users.php";
  17.       // 2.响应类型
  18.       xhr.responseType = "json";
  19.       // 3.配置参数
  20.       xhr.open("GET", url, true);
  21.       // 4.请求成功的回调
  22.       xhr.onload = () => {
  23.         console.log(xhr.response);
  24.       };
  25.       // 5.请求失败的回调
  26.       xhr.onerror = () => {
  27.         console.log("请求错误");
  28.       };
  29.       // 6.返回的值
  30.       xhr.send(null);
  31.     }
  32.   </script>
  33. </html>
上一条：【北亚服务器数据恢复】异常断电导致ESXI系统无法连接存储的数据恢复下一条：Js字符串api以及数组api演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多