简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 鼠标悬停,向前和向后翻页,实例演示 xhr对象
Blogger Information
Blog 18
fans 0
comment 0
visits 7739
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对象
只如初见
Original
570 people have browsed it

鼠标悬停,向前和向后翻页

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>轮播图</title>
  9.     <style>
  10.         /* ! 3. 轮播图 */
  12.         .slider {
  13.             max-width: 810px;
  14.             min-width: 320px;
  15.             margin: auto;
  16.             padding: 0 10px;
  17.             position: relative;
  18.             z-index: 9;
  19.         }
  21.         .slider .imgs {
  22.             /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  23.             height: 400px;
  24.         }
  26.         .slider .imgs img {
  27.             /* 图片完全充满父级空间显示 */
  28.             height: 100%;
  29.             width: 100%;
  30.             /* 图片带有圆角 */
  31.             border-radius: 10px;
  32.             /* 默认图片全部隐藏,只有有active的图片才显示 */
  33.             display: none;
  34.         }
  36.         .slider .imgs img:hover {
  37.             cursor: pointer;
  38.         }
  40.         /* 默认显示第一张 */
  42.         .slider .imgs img.active {
  43.             display: block;
  44.         }
  46.         /* 轮播图按钮组 */
  48.         .slider .btns {
  49.             /* 按钮水平一排显示,用flex,且水平居中 */
  50.             display: flex;
  51.             place-content: center;
  52.         }
  54.         .slider .btns span {
  55.             /* 按钮宽高相同,确定显示成一个正圆 */
  56.             width: 8px;
  57.             height: 8px;
  58.             /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  59.             background-color: rgba(255, 255, 255, 0.4);
  60.             /* 50%可确保显示为正圆 */
  61.             border-radius: 50%;
  62.             /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  63.             margin: -12px 3px 5px;
  64.         }
  66.         .slider .btns span.active {
  67.             background-color: #fff;
  68.         }
  70.         .button {
  71.             position: absolute;
  72.             z-index: 10;
  73.             left: 0;
  74.             top: 50%;
  75.             margin-top: -30px;
  76.             width: 100%;
  77.             display: flex;
  78.             justify-content: space-between
  79.         }
  81.         .button img {
  82.             width: 60px;
  83.             height: 60px;
  84.             cursor: pointer;
  85.         }
  87.         .button .butleft {
  88.             margin-left: 8px;
  89.         }
  91.         .button .butright {
  92.             margin-right: 8px;
  93.         }
  94.     </style>
  95. </head>
  97. <body>
  98.     <div class="slider">
  99.         <!-- 
  100.             图片容器
  101.             1. 图片组
  102.             2. 按钮组
  103.             注: 按钮数组与图片数量是一样的
  104.          -->
  105.         <div class="imgs" onmouseover="stopSlide()" onmouseout="goSlide()">
  106.             <!-- 轮播图默认从第一张开始显示 -->
  107.             <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  108.             <img src="./images/banner2.jpg" alt="" data-index="2" />
  109.             <img src="./images/banner3.png" alt="" data-index="3" />
  110.         </div>
  111.         <!-- 切换按钮数量与图片数量必须一致 -->
  112.         <div class="btns">
  113.             <span data-index="1" class="active" onclick="setActive()"></span>
  114.             <span data-index="2" onclick="setActive()"></span>
  115.             <span data-index="3" onclick="setActive()"></span>
  116.         </div>
  117.         <div class="button">
  118.             <div class="butleft" onclick="sideclick()"><img src="./images/left.png" /></div>
  119.             <div class="butright" onclick="sideclick()"><img src="./images/right.png" /></div>
  120.         </div>
  121.     </div>
  123.     <script>
  124.         //获取全部图片和按钮
  125.         const imgs = document.querySelectorAll('.slider .imgs img')
  126.         const btns = document.querySelectorAll('.slider .btns span')
  127.         let dataList = [...imgs].map((item) => item.dataset.index);
  128.         const tempIndex = dataList.shift();
  129.         dataList.push(tempIndex);
  130.         let playMain = null;
  131.         //设置激活状态
  132.         function setActive() {
  133.             // 1. 清空图片和所有按钮的激活状态
  134.             imgs.forEach(img => img.classList.remove('active'));
  135.             btns.forEach(btn => btn.classList.remove('active'));
  137.             // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
  138.             event.target.classList.add('active')
  139.             imgs.forEach(img => {
  140.                 if (img.dataset.index === event.target.dataset.index) {
  141.                     img.classList.add('active')
  142.                 }
  143.             })
  145.         }
  147.         //自动播放
  148.         function autoPlay() {
  149.             playMain = setInterval((arr) => {
  150.                 // 1. 头部删除
  151.                 let i = arr.shift()
  152.                 // 2. 尾部追加
  153.                 arr.push(i);
  154.                 // 3. 事件派发: 模拟用户点击
  155.                 btns[i].dispatchEvent(new Event('click'))
  157.             }, 2000, Object.keys(btns));
  158.         }
  159.         //鼠标移上停止
  160.         function stopSlide() {
  161.             clearInterval(playMain);
  162.         }
  163.         // 鼠标移开，自动轮播
  164.         function goSlide() {
  165.             autoPlay();
  166.         }
  167.         //前后按钮点击
  168.         function sideclick() {
  169.             stopSlide();
  170.             if (event.currentTarget.className === "butleft") {
  171.                 const tempIndex = dataList.pop();
  172.                 //console.log(tempIndex);
  173.                 dataList.unshift(tempIndex);
  174.                 autoPlayRender(tempIndex);
  175.             } else {
  176.                 const tempIndex = dataList.shift();
  177.                 //console.log(tempIndex);
  178.                 dataList.push(tempIndex);
  179.                 autoPlayRender(tempIndex);
  180.             }
  181.         }
  182.         //传入当前索引值，然后自动轮播
  183.         function autoPlayRender(tempIndex) {
  184.             cleanActive();
  185.             [...imgs].filter((item) => {
  186.                 if (item.dataset.index === tempIndex) {
  187.                     item.classList.add("active");
  188.                 }
  189.             });
  190.             [...btns].filter((item) => {
  191.                 if (item.dataset.index === tempIndex) {
  192.                     item.classList.add("active");
  193.                 }
  194.             });
  195.         }
  196.         //清除之前选中样式
  197.         function cleanActive() {
  198.             // 清空active
  199.             [...imgs].forEach((item) => item.classList.remove("active"));
  200.             [...btns].forEach((item) => item.classList.remove("active"));
  201.         }
  203.         window.onload = autoPlay();
  206.         // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
  207.         // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
  208.     </script>
  209. </body>
  211. </html>

效果

实例演示 xhr对象

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Ajax-XHR</title>
  9. </head>
  11. <body>
  12.     <button onclick="getUser(this)">用户信息: xhr</button>
  14.     <script>
  15.         function getUser(btn) {
  16.             // 1. 创建xhr对象
  17.             const xhr = new XMLHttpRequest;
  19.             // 2. 响应类型
  20.             xhr.responseType = 'json'
  22.             // 3. 配置参数
  23.             let url = 'http://127.0.0.21/users.php?id=3'
  24.             xhr.open('GET', url);
  26.             // 4. 请求成功的回调
  27.             xhr.onload = () => {
  28.                 // 返回的值
  29.                 console.log(xhr.response);
  30.             }
  31.             // 5. 请求失败的回调
  32.             xhr.onerror = () => {
  33.                 // 返回的值
  34.                 console.log('请求错误');
  35.             }
  36.             // 6. 发起xhr请求
  37.             xhr.send(null)
  38.         }
  39.     </script>
  40. </body>
  42. </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
1 comments
弦知音 2022-06-02 21:05:39
请问这个效果动图是用什么工具制作的
1 floor
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！