轮播图与懒加载

首页 > 博客列表 > 轮播图与懒加载

博主信息

博文 18

粉丝 0

访问量 20314

专题推荐

更多>

轮播图代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="banner/style1.css" />
  </head>
  <body>
    <div class="container">
      <nav class="imgs">
        <a href="#"
          ><img src="banner/banner1.jpg" alt="" class="active" data-index="1"
        /></a>
        <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
        <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
        <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
      </nav>
      <nav class="btns">
        <!-- 这些小按钮应该根据图片的数量自动生成的 -->
        <!-- <a href="#" class="active" data-index="1"></a> -->
        <!-- <a href="#" data-index="2"></a>
        <a href="#" data-index="3"></a>
        <a href="#" data-index="4"></a> -->
      </nav>
      <nav class="skip">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
      </nav>
    </div>

    <script>
      // 获取轮播图的盒子div
      let container = document.querySelector(".container");
      // 获取所有图片
      const imgs = document.querySelectorAll(".container > .imgs img");
      // 获取按钮
      const btnGroup = document.querySelector(".container > .btns");
      // 获取翻页按钮
      const skip = document.querySelectorAll(".container > .skip > *");
      // 创建出一组与图片数量对应的小按钮用函数来写
      function createBtns(place, imgLength) {
        // let htmStr=`<a href="#" data-index="${i+1}"></a>`;
        // 用文档碎片创建HTML代码插入
        const frag = document.createDocumentFragment();
        // console.log(frag);
        for (i = 0; i < imgLength; i++) {
          const a = document.createElement("a");
          a.href = "#";
          a.dataset.index = i + 1;
          if (i === 0) a.classList.add("active");
          frag.appendChild(a);
        }
        place.appendChild(frag);
      }
      createBtns(btnGroup, imgs.length);
      //   为创建好的小按钮添加事件用函数来写
      const btns = document.querySelectorAll(".container > .btns > *");
      //   console.log(btns);
      //   小面声明两个公共函数
      // 获取激活元素
      function getActiveEle(els) {
        let active = [...els].filter((img) => img.classList.contains("active"));
        return active.shift();
      }
      // 设置激活的元素，根据索引显示正在显示的图片
      function setActiveEle(btnIndex) {
        [imgs, btns].forEach((arr) => {
          // 将之前的状态全部重置到初始化状态
          //   console.log(arr);
          getActiveEle(arr).classList.remove("active");
          arr.forEach((item) => {
            console.log(item);
            if (item.dataset.index === btnIndex) {
              item.classList.add("active");
            }
          });
        });
      }
      //   setActiveEle();
      // 为每一个小按钮添加事件
      btns.forEach((btn) =>
        btn.addEventListener("click", (ev) =>
          setActiveEle(ev.target.dataset.index)
        )
      );
      //   console.log([...skip][0]);
      [...skip][0].addEventListener("click", function (ev) {
        console.log(ev.target);
      });
      // 实现自动播放
    </script>

运行结果
轮播结果

懒加载

懒加载代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>懒加载</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        width: 500px;
        margin: 0 auto;
      }
      .container > img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-18.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-19.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-20.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-21.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-22.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-23.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-24.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-25.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-26.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-27.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-28.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-29.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-30.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-31.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-32.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-33.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-34.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-35.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-36.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-37.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-38.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-39.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-40.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-41.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-42.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-43.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-44.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-45.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-46.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-47.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-48.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-49.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-50.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-51.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-52.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-53.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-54.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-55.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-56.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-57.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-58.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-59.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-60.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-61.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-62.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-63.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-64.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-65.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-66.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg" />
      <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg" />
    </div>

<script>
      // 懒加载主要用到一下知识点
      // 视口高度
      //   let viewHeight = document.documentElement.clientHeight;
      //   滚动高度
      window.onscroll = (en) => {
        console.log(document.documentElement.scrollTop);
      };
      //   图片距离文档顶部的偏移量（img.offsetTop）小于可视区高度与滚动高度之间的和表示进入可视区
      //   获取所有的图片元素
      const imgs = document.querySelectorAll(".container img");
      console.log(imgs);
      //   获取可视高度
      const viewHeight = document.documentElement.clientHeight;
      //   写一个懒加载的函数实现懒加载
      window.addEventListener("scroll", ljzLoad);
    //   页面加载完成后加载图片
      window.addEventListener("load", ljzLoad);
      function ljzLoad() {
        // 获取滚动高度
        let scrollHeight = document.documentElement.scrollTop;
        console.log(scrollHeight);
        imgs.forEach((img) => {
          if (img.offsetTop < viewHeight + scrollHeight) {
            img.src = img.dataset.src;
          }
        });
      }
    </script>

运行结果：
懒加载结果

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Html 标签理解及应用

2020-12-28 13:46:11