简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 鼠标悬停时自动停止播放, 离开时又自动播放 ，给这个轮播图加上翻页按按钮,实现向前和向后翻页播放 ，演示 xhr对象的使用
Blogger Information
Blog 38
fans 0
comment 0
visits 18872
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
鼠标悬停时自动停止播放, 离开时又自动播放 ，给这个轮播图加上翻页按按钮,实现向前和向后翻页播放 ，演示 xhr对象的使用
Blackeye
Original
512 people have browsed it

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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！