简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >选项卡，图片懒加载，轮播图自动播放功能-js-41课8.17

选项卡，图片懒加载，轮播图自动播放功能-js-41课8.17

希望
希望原创
2020年08月21日 09:47:061221浏览

一、选项卡

1.建demo1.html,并引入tabs.css和tabs.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>经典选项卡制作</title>
  7.     <style>
  8.       @import url(static/css/tabs.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <!-- 导航区 -->
  13.     <div class="tabs">
  14.       <ul class="tab">
  15.         <!-- 给一个激活项active -->
  16.         <li class="active" data-index="1">体育</li>
  17.         <li data-index="2">教育</li>
  18.         <li data-index="3">科技</li>
  19.       </ul>
  21.       <!-- 体育详情 -->
  22.       <ul class="item active" data-index="1">
  23.         <li><a href="">足球</a></li>
  24.         <li><a href="">篮球</a></li>
  25.         <li><a href="">高尔夫</a></li>
  26.       </ul>
  28.       <!-- 教育详情 -->
  29.       <ul class="item" data-index="2">
  30.         <li><a href="">数学</a></li>
  31.         <li><a href="">语文</a></li>
  32.         <li><a href="">英语</a></li>
  33.       </ul>
  35.       <!-- 科技详情 -->
  36.       <ul class="item" data-index="3">
  37.         <li><a href="">5G</a></li>
  38.         <li><a href="">AI</a></li>
  39.         <li><a href="">Blockchain</a></li>
  40.       </ul>
  41.     </div>
  42.     <script src="static/js/tabs.js"></script>
  43.   </body>
  44. </html>

2.建static/css/tabs.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: rgb(10, 1, 1);
  8. }
  9. a:hover {
  10.   text-decoration: underline;
  11.   color: red;
  12. }
  13. li {
  14.   list-style: none;
  15. }
  16. li:hover {
  17.   cursor: default;
  18. }
  19. .tabs {
  20.   width: 300px;
  21.   height: 200px;
  22.   margin: 30px;
  23.   background-color: rgb(245, 240, 240);
  25.   display: flex;
  26.   flex-direction: column;
  27. }
  29. .tab {
  30.   height: 36px;
  31.   display: flex;
  32. }
  33. .tab li {
  34.   flex: auto;
  35.   text-align: center;
  36.   line-height: 36px;
  37.   background-color: rgb(228, 226, 226);
  38. }
  40. .tab li.active {
  41.   background-color: rgb(248, 223, 140);
  42. }
  44. /* 默认所有选项卡只有一个显示,其它隐藏 */
  45. .item {
  46.   padding: 20px;
  47.   display: none;
  48. }
  49. .item.active {
  50.   display: block;
  51. }

3.建static/js/tabs.js

  1. // 1. 获取导航
  2. var tab = document.querySelector(".tab");
  3. // console.log(tab);
  4. // 2. 获取详情页,共3个，拿到全部
  5. var items = document.querySelectorAll(".item");
  6. // console.log(items);
  7. // 3. 给导航添加点击事件(事件代理/事件委托/冒泡)
  8. tab.addEventListener("click", show, false);
  9. tab.addEventListener("mouseover", show, false);
  10. // 4. 声明show()函数
  11. function show(ev) {
  12.   // ev: 事件对象
  13.   // ev.type: 事件类型,如click,mouseover,input....
  14.   //   console.log(ev.type);
  15.   // ev.target: 事件的触发者
  16.   //   console.log(ev.target);
  17.   // ev.currentTarget: 事件绑定者
  18.   //   console.log(ev.currentTarget);
  20.   // 1. 清除除当前高亮选项卡之外的选项卡的高亮样式
  21.   //   console.log(ev.currentTarget.children);
  22.   ev.currentTarget.childNodes.forEach(function (item) {
  23.     if (item.nodeType === 1) item.classList.remove("active");
  24.   });
  26.   // 2. 应该将用户点击的当前选项卡高亮显示
  27.   ev.target.classList.add("active");
  29.   // 3. 清空原有列表
  30.   items.forEach(function (item) {
  31.     item.classList.remove("active");
  32.   });
  34.   // 4. 将选项卡对应的内容进行切换(根据导航和详情中的data-index)
  35.   items.forEach(function (item) {
  36.     // console.log(item);
  37.     // console.log(ev.target.dataset.index, item.dataset.index);
  38.     if (ev.target.dataset.index === item.dataset.index) {
  39.       item.classList.add("active");
  40.     }
  41.   });
  42. }

二、图片懒加载

1.建demo3.html，引入lazy-base.css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>图片懒加载</title>
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  11.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  12.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  13.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  14.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  15.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  16.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  17.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  18.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  19.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  20.       <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
  21.       <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
  22.     </div>
  24.     <script>
  25.       // 1. 获取所有的图片
  26.       var imgs = document.querySelectorAll(".container img");
  28.       // 2. 获取文档的高度
  29.       var clientHeight = document.documentElement.clientHeight;
  31.       // 3. 监听滚动事件
  32.       window.addEventListener(
  33.         "scroll",
  34.         function () {
  35.           lazyload(imgs, clientHeight);
  36.         },
  37.         false
  38.       );
  40.       // 4. 懒加载函数
  41.       function lazyload(imgs, clientHeight) {
  42.         // 获取文档的滚动大小
  43.         var scrollTop = document.documentElement.scrollTop;
  45.         // 遍历图片,判断是否进入到可视区
  46.         imgs.forEach(function (img) {
  47.           if (img.offsetTop <= clientHeight + scrollTop) {
  48.             img.src = img.dataset.src;
  49.           }
  50.         });
  51.       }
  52.     </script>
  53.   </body>
  54. </html>

2.根目录下建img文件，放入很多图片

3.建static/css/lazy-base.css

  1. .parent {
  2.   height: 400px;
  3.   width: 300px;
  4.   padding: 5px;
  5.   background-color: rgb(166, 224, 194);
  6.   border: 5px solid;
  7.   overflow: scroll;
  9.   position: relative;
  10. }
  11. .parent .child {
  12.   height: 500px;
  13.   width: 400px;
  14.   padding: 5px;
  15.   background-color: rgb(241, 247, 194);
  16.   background-clip: content-box;
  17.   border: 5px solid;
  19.   position: relative;
  20.   left: 10px;
  21.   top: 20px;
  22. }

三、轮播图自动播放功能，鼠标移出时, 2秒后自动播放，鼠标移入时自动停止播放

1.在根目录下建banner文件夹，里面放入4张图片

2.建demo4.html,并引入banner图片，slider.css和slider.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>轮播图</title>
  7.     <link rel="stylesheet" href="static/css/slider.css" />
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <img
  12.         src="banner/banner1.jpg"
  13.         alt=""
  14.         data-index="1"
  15.         class="slider active"
  16.       />
  17.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  18.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  19.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  21.       <div class="point-list">
  22.         <!-- <span class="point active" data-index="1"></span>
  23.         <span class="point" data-index="2"></span>
  24.         <span class="point" data-index="3"></span> -->
  25.       </div>
  27.       <span class="skip prev">&lt;</span>
  28.       <span class="skip next">&gt;</span>
  29.     </div>
  30.     <script src="static/js/slider.js"></script>
  31.   </body>
  32. </html>

3.建static/css/slider.css

  1. ul,
  2. li {
  3.   margin: 0;
  4.   padding: 0;
  5.   list-style: none;
  6. }
  8. .box {
  9.   /*定位父级*/
  10.   position: relative;
  11.   width: 1000px;
  12.   height: 350px;
  13.   margin: 0 auto;
  14. }
  16. .box .slider {
  17.   width: 1000px;
  18.   height: 350px;
  19.   display: none;
  20. }
  22. .box .slider.active {
  23.   display: block;
  24. }
  26. .box .point-list {
  27.   position: absolute;
  28.   /*绝对定位的环境下的水平居中方式*/
  29.   left: 50%;
  30.   margin-left: -38px;
  31.   top: 310px;
  32. }
  34. .box .point-list .point {
  35.   display: inline-block;
  36.   width: 12px;
  37.   height: 12px;
  38.   margin: 0 5px;
  39.   background-color: white;
  40.   border-radius: 100%;
  41. }
  43. .box .point-list .point.active {
  44.   background-color: black;
  45. }
  47. .box .point-list .point:hover {
  48.   cursor: pointer;
  49. }
  51. .skip {
  52.   position: absolute;
  53.   top: 140px;
  54.   display: inline-block;
  55.   width: 40px;
  56.   height: 80px;
  57.   text-align: center;
  58.   line-height: 80px;
  59.   background-color: lightgray;
  60.   color: white;
  61.   opacity: 0.2;
  62.   font-size: 36px;
  63. }
  65. .box .prev {
  66.   left: 0;
  67. }
  69. .box .next {
  70.   right: 0;
  71. }
  73. .box .skip:hover {
  74.   cursor: pointer;
  75.   opacity: 0.5;
  76.   color: black;
  77. }

4.建static/js/slider.js

  1. // 获取轮播图片
  2. var imgs = document.querySelectorAll("img");
  4. // 获取小圆点
  5. var pointList = document.querySelector(".point-list");
  7. // 动态生成小圆点
  8. imgs.forEach(function (img, index) {
  9.   var span = document.createElement("span");
  10.   //   第一个小点是激活状态，添加索引span
  11.   if (index == 0) span.classList.add("point", "active");
  12.   span.classList.add("point");
  13.   // 给当前的小圆点添加自定义data-index属性
  14.   span.dataset.index = img.dataset.index;
  15.   pointList.appendChild(span);
  16. });
  18. // 获取所有小圆点
  19. var points = document.querySelectorAll(".point");
  21. // 给小圆点添加事件(代理)
  22. pointList.addEventListener("click", function (ev) {
  23.   imgs.forEach(function (img) {
  24.     if (img.dataset.index === ev.target.dataset.index) {
  25.       imgs.forEach(function (img) {
  26.         img.classList.remove("active");
  27.       });
  28.       img.classList.add("active");
  30.       // 设置与当前图片对应的小圆点高亮显示
  31.       // 因为这个功能要多处使用,这里将它声明为公共函数
  32.       setPointActive(img.dataset.index);
  33.     }
  34.   });
  35. });
  37. // 设置与当前图片对应的小圆点高亮显示;
  38. function setPointActive(imgIndex) {
  39.   points.forEach(function (point) {
  40.     point.classList.remove("active");
  41.   });
  43.   points.forEach(function (point) {
  44.     //   添加当前相等的
  45.     if (point.dataset.index === imgIndex) point.classList.add("active");
  46.   });
  47. }
  49. // 获取翻页按钮左右
  50. var skip = document.querySelectorAll(".skip");
  52. // 添加事件
  53. skip.item(0).addEventListener("click", skipImg, false);
  54. skip.item(1).addEventListener("click", skipImg, false);
  56. // 翻页显示图片的回调方法
  57. function skipImg(ev) {
  58.   // 1. 获取当前的图片
  59.   var currentImg = null;
  60.   imgs.forEach(function (img) {
  61.     if (img.classList.contains("active")) {
  62.       currentImg = img;
  63.     }
  64.   });
  65.   //   console.log(currentImg);
  67.   // 2. 判断是否是点击了显示前一张的按钮?
  68.   if (ev.target.classList.contains("prev")) {
  69.     //   为了显示出来前一张,必须将当前图片的激活去掉
  70.     currentImg.classList.remove("active");
  71.     // 将当前图片的前一张图片设置为当前图片
  72.     currentImg = currentImg.previousElementSibling;
  73.     // console.log(currentImg);
  74.     // 如果存在前一张,再显示它,否则进入循环,显示最后一张
  75.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  76.       currentImg.classList.add("active");
  77.     } else {
  78.       currentImg = imgs[imgs.length - 1];
  79.       currentImg.classList.add("active");
  80.     }
  81.   }
  83.   // 3. 判断是否是点击了显示下一张的按钮?
  84.   if (ev.target.classList.contains("next")) {
  85.     //   为了显示出来前一张,必须将当前图片的激活去掉
  86.     currentImg.classList.remove("active");
  87.     // 将当前图片的前一张图片设置为当前图片
  88.     currentImg = currentImg.nextElementSibling;
  89.     // console.log(currentImg);
  90.     // 如果存在下一张,再显示它,否则进入循环,显示第一张
  91.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  92.       currentImg.classList.add("active");
  93.     } else {
  94.       currentImg = imgs[0];
  95.       currentImg.classList.add("active");
  96.     }
  97.   }
  98.   // 小圆点高亮
  99.   setPointActive(currentImg.dataset.index);
  100. }
  102. var div = document.querySelector(".box");
  103. var playImg;
  104. // 页面加载时自动播放
  105. window.onload = start();
  106. // 鼠标移出时: 播放
  107. div.addEventListener("mouseout", start);
  108. // 鼠标移入时: 停止
  109. div.addEventListener("mouseover", function () {
  110.   clearInterval(playImg);
  111. });
  112. function start() {
  113.   playImg = setInterval(function () {
  114.     // Event 对象代表事件的状态
  115.     var event = new Event("click");
  116.     // 派发点击事件
  117.     skip.item(1).dispatchEvent(event);
  118.   }, 2000);
  119. }
  • 总结：
  • 选项卡可以将对应内容进行切换，第一个要做激活项
  • 懒加载有左边和顶部偏移量，可视区高度是动态变化的
  • 轮播图可以点击下方小圆点阅览，也可以点击左右翻页按钮阅览
上一条：2020.08.08周末班作业下一条：全面了解变量，常量，函数与初步认识字符串的创建与应用场景
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多