search

博客列表 >front 21 实战：tabs-懒加载-轮播图 （0817mon）

front 21 实战：tabs-懒加载-轮播图 （0817mon）

老黑
老黑原创
2020年08月22日 20:47:23696浏览

主要内容：

  1. tabs
  2. 懒加载
  3. 轮播图
  4. 几个要点：
    • index的绑定
    • class的妙用 - 通过add、remove元素的class的名称来获得高亮等属性
    • 懒加载中的具体位置计算

1. tabs

  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.         <li class="active" data-index="1">水果</li>
  16.         <li data-index="2">手机</li>
  17.         <li data-index="3">汽车</li>
  18.       </ul>
  20.       <!-- 水果对应的详情区 -->
  21.       <ul class="item active" data-index="1">
  22.         <li><a href="">西瓜</a></li>
  23.         <li><a href="">苹果</a></li>
  24.         <li><a href="">橙子</a></li>
  25.       </ul>
  27.       <!-- 手机对应的详情区 -->
  28.       <ul class="item" data-index="2">
  29.         <li><a href="">华为</a></li>
  30.         <li><a href="">小米</a></li>
  31.         <li><a href="">OPPO</a></li>
  32.       </ul>
  34.       <!-- 汽车对应的详情区 -->
  35.       <ul class="item" data-index="3">
  36.         <li><a href="">奇瑞</a></li>
  37.         <li><a href="">吉利</a></li>
  38.         <li><a href="">江淮</a></li>
  39.       </ul>
  40.     </div>
  41.     <script src="static/js/tabs.js"></script>
  42.   </body>
  43. </html>
  • css文件
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: #555;
  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: 300px;
  22.   margin: 30px;
  23.   background-color: #ddd;
  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: #fff;
  38. }
  39. .tab li.active {
  40.   background-color: #ddd;
  41. }
  43. /* 默认所有选项卡只有一个显示,其它隐藏 */
  44. .item {
  45.   padding: 20px;
  46.   display: none;
  47. }
  48. .item.active {
  49.   display: block;
  50. }
  • js部分
  1. // 1. 获取导航
  2. var tab = document.querySelector(".tab");
  3. // console.log(tab);
  5. // 2. 获取详情页
  6. var items = document.querySelectorAll(".item");
  7. // console.log(items);
  9. // 3. 给导航添加点击事件(事件代理/事件委托/冒泡)
  10. tab.addEventListener("click", show, false);
  11. tab.addEventListener("mouseover", show, false);
  13. // 4. 声明show()函数
  14. function show(ev) {
  15.   // ev: 事件对象
  16.   // ev.type: 事件类型,如click,mouseover,input....
  17.   //   console.log(ev.type);
  18.   // ev.target: 事件的触发者
  19.   //   console.log(ev.target);
  20.   // ev.currentTarget: 事件绑定者
  21.   //   console.log(ev.currentTarget);
  23.   // 4-1. 清除除当前高亮选项卡之外的选项卡的高亮样式
  24.   //   console.log(ev.currentTarget.children);
  25.   ev.currentTarget.childNodes.forEach(function (item) {
  26.     if (item.nodeType === 1) item.classList.remove("active");
  27.   }); // 1标示是非text的元素，也就是正常的元素
  29.   // 4-2. 应该将用户点击的当前选项卡高亮显示
  30.   ev.target.classList.add("active");
  32.   // 4-3. 清空原有列表
  33.   items.forEach(function (item) {
  34.     item.classList.remove("active");
  35.   });
  37.   // 4-4. 将选项卡对应的内容进行切换(根据导航和详情中的data-index)
  38.   items.forEach(function (item) {
  39.     // console.log(item);
  40.     // console.log(ev.target.dataset.index, item.dataset.index);
  41.     if (ev.target.dataset.index === item.dataset.index) {
  42.       item.classList.add("active");
  43.     }
  44.   });
  45. }

2. 懒加载

  • 基本原理
  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/lazy-base.css" />
  8.   </head>
  9.   <body>
  10.     <div class="parent">
  11.       <div class="child"></div>
  12.     </div>
  13.     <script>
  14.       var parent = document.querySelector(".parent");
  15.       var child = document.querySelector(".child");
  16.       // 1. 这四个属性的值,与css样式相关
  17.       console.log("元素的高度: ", child.offsetHeight);
  18.       console.log("元素的宽度: ", child.offsetWidth);
  19.       console.log("距离父元素的左偏移量: ", child.offsetLeft);
  20.       console.log("距离父元素的顶部偏移量: ", child.offsetTop);
  22.       // 2. 元素内容区大小
  23.       //   content + padding
  24.       console.log(child.clientHeight);
  25.       console.log(child.clientWidth);
  26.       console.log(document.documentElement.clientHeight);
  27.     </script>
  28.   </body>
  29. </html>

图示如下：

  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-70.jpg" />
  19.     </div>
  21.     <script>
  22.       // 1. 获取所有的图片
  23.       // 用css选择器选择图片，class前面需要有.，但如果是tab则不需要。
  24.       var imgs = document.querySelectorAll(".container img");
  26.       // 2. 获取文档的高度
  27.       var clientHeight = document.documentElement.clientHeight;
  29.       // 3. 监听滚动事件
  30.       window.addEventListener("scroll", function () {
  31.           lazyload(imgs, clientHeight);
  32.         },
  33.         false
  34.       );
  36.       // 4. 懒加载函数
  37.       function lazyload(imgs, clientHeight) {
  38.         // 获取文档的滚动大小
  39.         var scrollTop = document.documentElement.scrollTop;
  41.         // 遍历图片,判断是否进入到可视区
  42.         // 下面这个公式很重要，clientHeight指的就是浏览器的可视区高度
  43.         // scrollTop则是页面卷上去的高度吧
  44.         imgs.forEach(function (img) {
  45.           if (img.offsetTop <= clientHeight + scrollTop) {
  46.             img.src = img.dataset.src;
  47.           }
  48.         });
  49.       }
  50.     </script>
  51.   </body>
  52. </html>
  1. .parent {
  2.   height: 400px;
  3.   width: 300px;
  4.   padding: 5px;
  5.   background-color: lightblue;
  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: lightgreen;
  16.   background-clip: content-box;
  17.   border: 5px solid;
  19.   position: relative;
  20.   left: 10px;
  21.   top: 20px;
  22. }

3. 轮播

  • 轮播的要点：
    • a-下面的小圆点及高亮；
    • b-左右的切换；
    • c-active被通过class名称的方式来改变属性
  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 src="banner/banner1.jpg" alt="" data-index="1" class="slider active"/>
  12.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  13.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  14.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  16.       <div class="point-list">
  17.         <!-- 下面这段小圆点是通过js动态生成的，因为要跟具体图片的数量报纸一致，
  18.         并且index要跟图片对应起来 -->
  19.         <!-- <span class="point active" data-index="1"></span>
  20.         <span class="point" data-index="2"></span>
  21.         <span class="point" data-index="3"></span> -->
  22.       </div>
  24.       <span class="skip prev">&lt;</span>
  25.       <span class="skip next">&gt;</span>
  26.     </div>
  27.     <script src="static/js/slider.js"></script>
  28.   </body>
  29. </html>
  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. }
  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.   if (index == 0) span.classList.add("point", "active");
  11.   span.classList.add("point");
  12.   // 给当前的小圆点添加自定义的data-index
  13.   span.dataset.index = img.dataset.index;
  14.   pointList.appendChild(span);
  15. });
  17. // 获取到所有的小圆点
  18. var points = document.querySelectorAll(".point");
  20. // 给小圆点添加事件(代理)
  21. pointList.addEventListener("click", function (ev) {
  22.   imgs.forEach(function (img) {
  23.     if (img.dataset.index === ev.target.dataset.index) {
  24.       imgs.forEach(function (img) {
  25.         img.classList.remove("active"); // 先将其他的高亮取消掉。
  26.       });
  27.       img.classList.add("active");
  28.       // 设置与当前图片对应的小圆点高亮显示
  29.       // 因为这个功能要多处使用,这里将它声明为公共函数
  30.       setPointActive(img.dataset.index);
  31.     }
  32.   });
  33. });
  35. // 设置与当前图片对应的小圆点高亮显示;
  36. function setPointActive(imgIndex) {
  37.   points.forEach(function (point) {
  38.     point.classList.remove("active");
  39.   });
  41.   points.forEach(function (point) {
  42.     if (point.dataset.index === imgIndex) point.classList.add("active");
  43.   });
  44. }
  46. // -----------------  翻页功能 -----------------
  48. // 获取翻页按钮
  49. var skip = document.querySelectorAll(".skip");
  51. // 添加事件
  52. skip.item(0).addEventListener("click", skipImg, false);
  53. skip.item(1).addEventListener("click", skipImg, false);
  55. // 翻页显示图片的回调方法
  56. function skipImg(ev) {
  57.   // 1. 获取当前的图片
  58.   var currentImg = null;
  59.   imgs.forEach(function (img) {
  60.     if (img.classList.contains("active")) {
  61.       currentImg = img; // 选择目前激活的图片并显示
  62.     }
  63.   });
  64.   //   console.log(currentImg);
  66.   // 2. 判断是否是点击了显示前一张的按钮?
  67.   if (ev.target.classList.contains("prev")) {
  68.     //   为了显示出来前一张,必须将当前图片的激活去掉
  69.     currentImg.classList.remove("active");
  70.     // 将当前图片的前一张图片设置为当前图片
  71.     currentImg = currentImg.previousElementSibling;
  72.     // console.log(currentImg);
  73.     // 如果存在前一张,再显示它,否则进入循环,显示最后一张
  74.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  75.       currentImg.classList.add("active");
  76.     } else {
  77.       currentImg = imgs[imgs.length - 1];// 返回到最后一张图片
  78.       currentImg.classList.add("active");
  79.     }
  80.   }
  82.   // 3. 判断是否是点击了显示下一张的按钮?
  83.   if (ev.target.classList.contains("next")) {
  84.     //   为了显示出来前一张,必须将当前图片的激活去掉
  85.     currentImg.classList.remove("active");
  86.     // 将当前图片的前一张图片设置为当前图片
  87.     currentImg = currentImg.nextElementSibling;
  88.     // console.log(currentImg);
  89.     // 如果存在下一张,再显示它,否则进入循环,显示第一张
  90.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  91.       currentImg.classList.add("active");
  92.     } else {
  93.       currentImg = imgs[0]; // 返回到了第一张图片
  94.       currentImg.classList.add("active");
  95.     }
  96.   }
  97.   // 小圆点高亮
  98.   setPointActive(currentImg.dataset.index);
  99. }

4. 作业:

  • 给轮播图添加自动播放功能,要求鼠标移入时自动停止播放并等用户操作
  • 鼠标移出时, 2秒后自动播放
    间歇式定时器
    setInterval(function(){}, 时间)
  1. // 自动轮播图
  3. let autoStart = setInterval(autoSlide, 1000);
  4. function autoSlide(){
  5.   var currentImg = null;
  6.   imgs.forEach(function (img) {
  7.     if (img.classList.contains("active")) {
  8.       currentImg = img;
  9.       currentImg.classList.remove("active");    
  10.     }});
  12.   currentImg = currentImg.nextElementSibling;
  14.   if (currentImg !== null && currentImg.nodeName === "IMG") {
  15.     currentImg.classList.add("active");
  16.   } else {
  17.     currentImg = imgs[0];
  18.     currentImg.classList.add("active");
  19.   }
  20.   setPointActive(currentImg.dataset.index);
  21. }
  23. // imgs.addEventListener("mouseover",function(){clearInterval(autoStart);}, false);
  24. // imgs.addEventListener("mouseout", function(){autoStart = setInterval(autoSlide, 2000);}, false);
  25. // 貌似直接利用imgs不行。box才可以。
  27. box = document.querySelector(".box");
  28. box.addEventListener("mouseover", function(){clearInterval(autoStart);}, false);
  29. box.addEventListener("mouseout", function(){autoStart = setInterval(autoSlide, 1000);}, false);
上一条：PHP大牛成长之路：jQuery的DOM操作场景示例下一条：Ajax-post无刷新分页技术-js-44课8.20
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多