search

博客列表 >鼠标悬停,向前和向后翻页,实例演示 xhr对象

鼠标悬停,向前和向后翻页,实例演示 xhr对象

只如初见
只如初见原创
2022年04月13日 18:38:39577浏览

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

代码

  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>

效果

上一条：仿PHP中文网首页部分布局下一条：轮播图：1: 实现鼠标悬停时自动停止播放, 离开时又自动播放 2 加上翻页按按钮,实现向前和向后翻页播放 。 实例演示 xhr对象的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
弦知音2022-06-02 21:05:391楼
请问这个效果动图是用什么工具制作的

相关文章

查看更多