search

博客列表 >JS原生实现选项卡和图片懒加载

JS原生实现选项卡和图片懒加载

陈强
陈强原创
2021年01月12日 15:53:55565浏览

选项卡

  1. //css样式
  2. <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       a {
  9.         text-decoration: none;
  10.         color: #333;
  11.       }
  12.       ul li {
  13.         list-style: none;
  14.       }
  15.       .con {
  16.         width: 20em;
  17.         box-shadow: 0 0 3px #ccc;
  18.         margin: 2em;
  19.       }
  20.       .con .tab {
  21.         display: grid;
  22.         grid-template-columns: repeat(3, 1fr);
  23.         text-align: center;
  24.         background-color: #ccc;
  25.       }
  26.       .con .tab li {
  27.         padding: 0.5em 0;
  28.         cursor: pointer;
  29.       }
  30.       .con .active {
  31.         background-color: #fff;
  32.       }
  33.       .con .item {
  34.         padding: 0.5em;
  35.       }
  36.       .con .item li {
  37.         padding: 0.2em 0;
  38.       }
  39.       .item {
  40.         padding: 20px;
  41.         display: none;
  42.       }
  43.       .item.active {
  44.         display: block;
  45.       }
  46.     </style>
  48. //html代码
  50. <div class="con">
  51.       <ul class="tab">
  52.         <li class="active" data-index="1">第一个</li>
  53.         <li data-index="2">第二个</li>
  54.         <li data-index="3">第三个</li>
  55.       </ul>
  56.       <ul data-index="1" class="item active">
  57.         <li><a href="#">第一个选项卡内容</a></li>
  58.         <li><a href="#">第一个选项卡内容</a></li>
  59.         <li><a href="#">第一个选项卡内容</a></li>
  60.         <li><a href="#">第一个选项卡内容</a></li>
  61.         <li><a href="#">第一个选项卡内容</a></li>
  62.         <li><a href="#">第一个选项卡内容</a></li>
  63.         <li><a href="#">第一个选项卡内容</a></li>
  64.         <li><a href="#">第一个选项卡内容</a></li>
  65.         <li><a href="#">第一个选项卡内容</a></li>
  66.         <li><a href="#">第一个选项卡内容</a></li>
  67.       </ul>
  68.       <ul data-index="2" class="item">
  69.         <li><a href="#">第二个选项卡内容</a></li>
  70.         <li><a href="#">第二个选项卡内容</a></li>
  71.         <li><a href="#">第二个选项卡内容</a></li>
  72.         <li><a href="#">第二个选项卡内容</a></li>
  73.         <li><a href="#">第二个选项卡内容</a></li>
  74.         <li><a href="#">第二个选项卡内容</a></li>
  75.         <li><a href="#">第二个选项卡内容</a></li>
  76.         <li><a href="#">第二个选项卡内容</a></li>
  77.         <li><a href="#">第二个选项卡内容</a></li>
  78.         <li><a href="#">第二个选项卡内容</a></li>
  79.       </ul>
  80.       <ul data-index="3" class="item">
  81.         <li><a href="#">第三个选项卡内容</a></li>
  82.         <li><a href="#">第三个选项卡内容</a></li>
  83.         <li><a href="#">第三个选项卡内容</a></li>
  84.         <li><a href="#">第三个选项卡内容</a></li>
  85.         <li><a href="#">第三个选项卡内容</a></li>
  86.         <li><a href="#">第三个选项卡内容</a></li>
  87.         <li><a href="#">第三个选项卡内容</a></li>
  88.         <li><a href="#">第三个选项卡内容</a></li>
  89.         <li><a href="#">第三个选项卡内容</a></li>
  90.         <li><a href="#">第三个选项卡内容</a></li>
  91.       </ul>
  92.     </div>
  94. //js代码
  96. <script>
  97.       const tab = document.querySelector(".con .tab");
  98.       const items = document.querySelectorAll(".con .item");
  99.       tab.onmouseover = (ev) => {
  100.         [...tab.children].forEach((item) => item.classList.remove("active"));
  101.         console.log([Array.from(tab.children)]);
  102.         ev.target.classList.add("active");
  103.         items.forEach((item) => item.classList.remove("active"));
  104.         [...items].filter((item) => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");
  105.       };
  106.     </script>

图片懒加载

  1. //html代码
  2. <ul class="imgs">
  3.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  4.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  5.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  6.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  7.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  8.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  9.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  10.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  11.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  12.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  13.       <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
  14.       <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
  15.       <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg" />
  16.       <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg" />
  17.       <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg" />
  18.       <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg" />
  19.       <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg" />
  20.     </ul>
  22. //js代码
  24. <script>
  25.       //获取图片列表
  26.       const imgs = document.querySelectorAll(".imgs img");
  27.       //获取当前视口高度
  28.       const clientHeight = document.documentElement.clientHeight;
  29.       window.addEventListener("scroll", layzyload);
  31.       window.addEventListener("load", layzyload);
  33.       function layzyload() {
  34.         //获取滚动高度
  35.         let scrollTop = document.documentElement.scrollTop;
  36.         //遍历当前图片是否到了可视区 图片到顶部的高度小于视口+滚动高度，即认为图片进入可视区
  37.         imgs.forEach((img) => {
  38.           if (img.offsetTop < scrollTop + clientHeight) {
  39.             setTimeout(() => (img.src = img.dataset.src), 500);
  40.           }
  41.         });
  42.       }
  43.     </script>

轮播图

  1. //html代码
  3. <div class="container">
  4.       <!-- 1. 图片组 -->
  5.       <nav class="imgs">
  6.         <a href="#"
  7.           ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
  8.         /></a>
  9.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  10.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  11.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  12.       </nav>
  13.       <!-- 2. 与图片组对应的按钮组(一个个独立的,数量与图片数量是相同的) -->
  14.       <nav class="btns">
  15.         <!-- 这些小按钮应该是js根据图片数量动态来创建 -->
  16.       </nav>
  17.       <!-- 3. 翻页按钮(只有二个,分别在左右) -->
  18.       <nav class="skip">
  19.         <!-- &lt;: 实体符号 -->
  20.         <a href="#" class="prev">&lt;</a>
  21.         <a href="#" class="next">&gt;</a>
  22.       </nav>
  23.     </div>
  25. //JS代码
  27. <script>
  28.       // 获取相关的元素对象
  29.       // 图片组
  30.       const imgs = document.querySelectorAll(".container > .imgs img");
  31.       // 按钮组
  32.       const btnGroup = document.querySelector(" .container > .btns");
  33.       // 翻页按钮
  34.       const skip = document.querySelector(" .container > .skip");
  36.       // 自动生成按钮组,数量与图片数量一致
  38.       function autoCreateBtns(ele, imgLength) {
  39.         // 使用文档片断
  40.         const frag = document.createDocumentFragment();
  41.         for (let i = 0; i < imgLength; i++) {
  42.           const a = document.createElement("a");
  43.           // #: 防止默认行为，更加规范用 ev.preventDefault();
  44.           a.href = "#";
  45.           // 自定义数据属性
  46.           a.dataset.index = i + 1;
  47.           //   为第一个按钮添加高亮,这是默认的
  48.           if (i === 0) a.classList.add("active");
  49.           frag.appendChild(a);
  50.         }
  51.         ele.appendChild(frag);
  52.       }
  53.       // 调用该函数自动生成与图片一一对应的小按钮
  54.       autoCreateBtns(btnGroup, imgs.length);
  56.       // 获取到刚生成的按钮组中所有按钮
  57.       const btns = document.querySelectorAll(" .container > .btns > *");
  59.       // 下面声明2个公共函数
  60.       // 1. 获取激活的元素
  61.       function getActiveEle(eles) {
  62.         let activities = Array.from(eles).filter(img =>
  63.           img.classList.contains("active")
  64.         );
  65.         return activities.shift();
  66.       }
  68.       // 2. 设置激活的元素
  69.       function setActiveEle(btnIndex) {
  70.         // 同时遍历所有图片与按钮
  71.         [imgs, btns].forEach(arr => {
  72.           // 取消当前激活元素的状态
  73.           getActiveEle(arr).classList.remove("active");
  74.           // 根据当前用户点击的按钮索引,重置应该激活的元素
  75.           arr.forEach(item => {
  76.             if (item.dataset.index === btnIndex) {
  77.               item.classList.add("active");
  78.             }
  79.           });
  80.         });
  81.       }
  83.       // 为每一个独立的小按钮添加事件,不要使用事件代理
  84.       btns.forEach(btn =>
  85.         btn.addEventListener(
  86.           "click",
  87.           ev => setActiveEle(ev.target.dataset.index),
  88.           false
  89.         )
  90.       );
  92.       // 作业1: 为每个翻页按钮添加事件完成图片翻页(兄弟节点的处理)
  93.       skip.addEventListener("click", skipImg, false);
  94.       // 单独写一个事件监听器,为后面的事件自动派发做准备
  95.       skip.children[0].addEventListener("click", skipImg, false);
  97.       // 将前后翻页,使用一个回调统一处理
  98.       function skipImg(ev) {
  99.         // 当前激活的图片,实际上这里用不到它,而应该用它的父级<a>来判断是否存在兄弟节点
  100.         let currentImg = getActiveEle(imgs);
  101.         // 当前图片组父元素,注意<img>父级是<a>,<a>的父级才是需要的父节点
  102.         let parentEle = currentImg.parentElement.parentElement;
  103.         // 当前元素的前一个兄弟节点:previousElementSibling;
  104.         let prevEle = currentImg.parentElement.previousElementSibling;
  105.         // 当前元素的下一个兄弟节点:nextElementSibling;
  106.         let nextEle = currentImg.parentElement.nextElementSibling;
  107.         // 第一张图片, firstElementChild第一个子元素
  108.         let firstImg = parentEle.firstElementChild.firstElementChild;
  109.         // 最后一张图片, firstElementChild, 最后一个子元素
  110.         let lastImg = parentEle.lastElementChild.firstElementChild;
  112.         let activeImg = currentImg;
  113.         // 向前翻页
  114.         if (ev.target.classList.contains("prev")) {
  115.           // 如果存在前一张图片,就使用它,否则就使用最后一张图片来更新它,形成循环显示的效果
  116.           let activeImg =
  117.             prevEle !== null ? prevEle.firstElementChild : lastImg;
  118.           // 使用激活元素来同步更新图片与按钮
  119.           setActiveEle(activeImg.dataset.index);
  120.         }
  121.         // 向后翻页
  122.         if (ev.target.classList.contains("next")) {
  123.           // 如果不存在下一张图片,就用第一张图片更新它
  124.           let activeImg =
  125.             nextEle !== null ? nextEle.firstElementChild : firstImg;
  126.           setActiveEle(activeImg.dataset.index);
  127.         }
  128.       }
  130.       // 作业2: 图片每隔2秒自动播放(定时器,事件自动派发)
  131.       let timer = null;
  132.       const slider = document.querySelector(".container");
  133.       slider.addEventListener("mouseout", startTimer, false);
  134.       slider.addEventListener("mouseover", clearTimer, false);
  135.       // 启动定时器
  136.       function startTimer() {
  137.         // 创建自定义事件对象
  138.         const clickEvent = new Event("click");
  139.         timer = setInterval(
  140.           () => skip.children[0].dispatchEvent(clickEvent),
  141.           2000
  142.         );
  143.       }
  145.       // 清除定时器
  146.       function clearTimer() {
  147.         clearInterval(timer);
  148.       }
  149.     </script>
上一条：幻灯片完善：为翻页按钮添加功能 , 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放，选项卡, 懒加载二选一下一条：原生js实现选项卡和轮播图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多