search

博客列表 >JS经典案例：懒加载和轮播图

JS经典案例：懒加载和轮播图

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年05月28日 22:58:231170浏览

案例一：懒加载

1.代码

  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.       .images {
  9.         width: 1200px;
  10.         margin: 10px auto;
  11.         display: grid;
  12.         grid-template-columns: repeat(2, 1fr);
  13.       }
  14.       .images > img {
  15.         margin: 10px auto;
  16.         width: 500px;
  17.         height: 400px;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="images">
  23.       <img src="images/temp.jpg" alt="" data-index="images/img-1.jpg" />
  24.       <img src="images/temp.jpg" alt="" data-index="images/img-2.jpg" />
  25.       <img src="images/temp.jpg" alt="" data-index="images/img-3.jpg" />
  26.       <img src="images/temp.jpg" alt="" data-index="images/img-4.jpg" />
  27.       <img src="images/temp.jpg" alt="" data-index="images/img-5.jpg" />
  28.       <img src="images/temp.jpg" alt="" data-index="images/img-6.jpg" />
  29.       <img src="images/temp.jpg" alt="" data-index="images/img-7.jpg" />
  30.       <img src="images/temp.jpg" alt="" data-index="images/img-8.jpg" />
  31.       <img src="images/temp.jpg" alt="" data-index="images/img-9.jpg" />
  32.       <img src="images/temp.jpg" alt="" data-index="images/img-10.jpg" />
  33.       <img src="images/temp.jpg" alt="" data-index="images/img-11.jpg" />
  34.       <img src="images/temp.jpg" alt="" data-index="images/img-12.jpg" />
  35.       <img src="images/temp.jpg" alt="" data-index="images/img-13.jpg" />
  36.       <img src="images/temp.jpg" alt="" data-index="images/img-14.jpg" />
  37.       <img src="images/temp.jpg" alt="" data-index="images/img-15.jpg" />
  38.       <img src="images/temp.jpg" alt="" data-index="images/img-16.jpg" />
  39.       <img src="images/temp.jpg" alt="" data-index="images/img-17.jpg" />
  40.       <img src="images/temp.jpg" alt="" data-index="images/img-18.jpg" />
  41.       <img src="images/temp.jpg" alt="" data-index="images/img-19.jpg" />
  42.       <img src="images/temp.jpg" alt="" data-index="images/img-20.jpg" />
  43.       <img src="images/temp.jpg" alt="" data-index="images/img-21.jpg" />
  44.       <img src="images/temp.jpg" alt="" data-index="images/img-22.jpg" />
  45.       <img src="images/temp.jpg" alt="" data-index="images/img-23.jpg" />
  46.       <img src="images/temp.jpg" alt="" data-index="images/img-24.jpg" />
  47.       <img src="images/temp.jpg" alt="" data-index="images/img-25.jpg" />
  48.       <img src="images/temp.jpg" alt="" data-index="images/img-26.jpg" />
  49.       <img src="images/temp.jpg" alt="" data-index="images/img-27.jpg" />
  50.       <img src="images/temp.jpg" alt="" data-index="images/img-28.jpg" />
  51.       <img src="images/temp.jpg" alt="" data-index="images/img-29.jpg" />
  52.       <img src="images/temp.jpg" alt="" data-index="images/img-30.jpg" />
  53.       <img src="images/temp.jpg" alt="" data-index="images/img-31.jpg" />
  54.       <img src="images/temp.jpg" alt="" data-index="images/img-32.jpg" />
  55.       <img src="images/temp.jpg" alt="" data-index="images/img-33.jpg" />
  56.       <img src="images/temp.jpg" alt="" data-index="images/img-34.jpg" />
  57.       <img src="images/temp.jpg" alt="" data-index="images/img-35.jpg" />
  58.       <img src="images/temp.jpg" alt="" data-index="images/img-36.jpg" />
  59.       <img src="images/temp.jpg" alt="" data-index="images/img-37.jpg" />
  60.       <img src="images/temp.jpg" alt="" data-index="images/img-38.jpg" />
  61.       <img src="images/temp.jpg" alt="" data-index="images/img-39.jpg" />
  62.       <img src="images/temp.jpg" alt="" data-index="images/img-40.jpg" />
  63.       <img src="images/temp.jpg" alt="" data-index="images/img-41.jpg" />
  64.       <img src="images/temp.jpg" alt="" data-index="images/img-42.jpg" />
  65.       <img src="images/temp.jpg" alt="" data-index="images/img-43.jpg" />
  66.       <img src="images/temp.jpg" alt="" data-index="images/img-44.jpg" />
  67.       <img src="images/temp.jpg" alt="" data-index="images/img-45.jpg" />
  68.       <img src="images/temp.jpg" alt="" data-index="images/img-46.jpg" />
  69.       <img src="images/temp.jpg" alt="" data-index="images/img-47.jpg" />
  70.       <img src="images/temp.jpg" alt="" data-index="images/img-48.jpg" />
  71.       <img src="images/temp.jpg" alt="" data-index="images/img-49.jpg" />
  72.       <img src="images/temp.jpg" alt="" data-index="images/img-50.jpg" />
  73.       <img src="images/temp.jpg" alt="" data-index="images/img-51.jpg" />
  74.       <img src="images/temp.jpg" alt="" data-index="images/img-52.jpg" />
  75.       <img src="images/temp.jpg" alt="" data-index="images/img-53.jpg" />
  76.       <img src="images/temp.jpg" alt="" data-index="images/img-54.jpg" />
  77.       <img src="images/temp.jpg" alt="" data-index="images/img-55.jpg" />
  78.       <img src="images/temp.jpg" alt="" data-index="images/img-56.jpg" />
  79.       <img src="images/temp.jpg" alt="" data-index="images/img-57.jpg" />
  80.       <img src="images/temp.jpg" alt="" data-index="images/img-58.jpg" />
  81.       <img src="images/temp.jpg" alt="" data-index="images/img-59.jpg" />
  82.       <img src="images/temp.jpg" alt="" data-index="images/img-60.jpg" />
  83.       <img src="images/temp.jpg" alt="" data-index="images/img-61.jpg" />
  84.       <img src="images/temp.jpg" alt="" data-index="images/img-62.jpg" />
  85.       <img src="images/temp.jpg" alt="" data-index="images/img-63.jpg" />
  86.       <img src="images/temp.jpg" alt="" data-index="images/img-64.jpg" />
  87.       <img src="images/temp.jpg" alt="" data-index="images/img-65.jpg" />
  88.       <img src="images/temp.jpg" alt="" data-index="images/img-66.jpg" />
  89.       <img src="images/temp.jpg" alt="" data-index="images/img-67.jpg" />
  90.       <img src="images/temp.jpg" alt="" data-index="images/img-68.jpg" />
  91.       <img src="images/temp.jpg" alt="" data-index="images/img-69.jpg" />
  92.       <img src="images/temp.jpg" alt="" data-index="images/img-70.jpg" />
  93.     </div>
  94.   </body>
  95.   <script>
  96.     var cl = console.log.bind(console);
  97.     var imgs = document.querySelectorAll("img");
  98.     var viewheight = document.documentElement.clientHeight; //文档可视区域大小
  99.     cl(window);
  100.     //监听浏览器窗口滚动
  101.     window.addEventListener(
  102.       "scroll",
  103.       function () {
  104.         var scroll = document.documentElement.scrollTop; //文档滚动大小
  105.         imgs.forEach(function (item) {
  106.           if (item.offsetTop <= viewheight + scroll)
  107.             item.src = item.dataset.index;
  108.         });
  109.       },
  110.       false
  111.     );
  112.   </script>
  113. </html>

2.运行结果图：

案例二：轮播图

1.代码：

  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.       body {
  9.         /*background-color: #808080;*/
  10.       }
  11.       .slider {
  12.         width: 800px;
  13.         height: 280px;
  14.         margin: 10px auto;
  15.         position: relative;
  16.       }
  17.       .slider > .images > .image {
  18.         width: 800px;
  19.         height: 280px;
  20.         display: none;
  21.       }
  22.       .slider > .images > .active {
  23.         display: block;
  24.       }
  25.       .slider > .skip {
  26.         display: inline-block;
  27.         width: 40px;
  28.         height: 60px;
  29.         background-color: RGB(255, 255, 255, 0.2);
  30.         text-align: center;
  31.         line-height: 60px;
  32.         font-size: 30px;
  33.         color: RGB(0, 0, 0, 0.2);
  34.         position: absolute;
  35.         top: 100px;
  36.       }
  37.       .slider > .skip:hover {
  38.         cursor: pointer;
  39.         background-color: RGB(255, 255, 255, 0.6);
  40.         color: RGB(0, 0, 0, 0.8);
  41.       }
  43.       .slider > .prev {
  44.         position: absolute;
  45.         left: 0;
  46.       }
  47.       .slider > .next {
  48.         position: absolute;
  49.         right: 0;
  50.       }
  51.       .slider > .points {
  52.         width: 550px;
  53.         /* margin: 0 auto; */
  54.         text-align: center;
  55.         position: absolute;
  56.         bottom: 10px;
  57.         left: 150px;
  58.       }
  59.       .slider > .points > .point {
  60.         display: inline-block;
  61.         width: 12px;
  62.         height: 12px;
  63.         margin: 0 5px;
  64.         background-color: white;
  65.         border-radius: 100%;
  66.       }
  67.       .slider > .points > .point:hover {
  68.         cursor: pointer;
  69.       }
  70.       .slider > .points > .active {
  71.         background-color: black;
  72.       }
  73.     </style>
  74.   </head>
  75.   <body>
  76.     <div class="slider">
  77.       <div class="images">
  78.         <img
  79.           class="image active"
  80.           src="banner/banner1.jpg"
  81.           alt=""
  82.           data-index="1"
  83.         />
  84.         <img class="image" src="banner/banner2.jpg" alt="" data-index="2" />
  85.         <img class="image" src="banner/banner3.jpg" alt="" data-index="3" />
  86.         <img class="image" src="banner/banner4.jpg" alt="" data-index="4" />
  87.       </div>
  89.       <span class="skip prev">&lt;</span>
  90.       <span class="skip next">&gt;</span>
  92.       <div class="points">
  93.         <span class="point active" data-index="1"></span>
  94.         <span class="point" data-index="2"></span>
  95.         <span class="point" data-index="3"></span>
  96.         <span class="point" data-index="4"></span>
  97.       </div>
  98.     </div>
  99.   </body>
  100.   <script>
  101.     var cl = console.log.bind(console);
  102.     var imgs = document.querySelectorAll("img");
  103.     var prev = document.querySelector(".prev");
  104.     // cl(prev);
  105.     var next = document.querySelector(".next");
  106.     var pointparent = document.querySelector(".points");
  107.     var points = document.querySelectorAll(".point");
  108.     //小圆点切换
  109.     pointparent.addEventListener(
  110.       "click",
  111.       function (ev) {
  112.         // cl(ev.target.nodeType);
  113.         if (ev.target.nodeType === 1 && ev.target != pointparent) {
  114.           arr = Array.from(pointparent.children);
  115.           arr.forEach(function (item) {
  116.             item.classList.remove("active");
  117.           });
  118.           ev.target.classList.add("active");
  119.           imgs.forEach(function (item) {
  120.             item.classList.remove("active");
  121.             if (item.dataset.index === ev.target.dataset.index) {
  122.               item.classList.add("active");
  123.             }
  124.           });
  125.         }
  126.       },
  127.       false
  128.     );
  130.     //向前翻页
  131.     prev.addEventListener(
  132.       "click",
  133.       function () {
  134.         var active = document.querySelector(".slider>.images>.active");
  136.         imgs.forEach(function (item) {
  137.           item.classList.remove("active");
  138.         });
  139.         if (active.previousElementSibling) {
  140.           pre = active.previousElementSibling;
  141.         } else {
  142.           pre = imgs[imgs.length - 1];
  143.         }
  144.         pre.classList.add("active");
  145.         points.forEach(function (item) {
  146.           item.classList.remove("active");
  147.           if (item.dataset.index === pre.dataset.index) {
  148.             item.classList.add("active");
  149.           }
  150.         });
  151.       },
  152.       false
  153.     );
  154.     // 向后翻页
  155.     next.addEventListener(
  156.       "click",
  157.       function () {
  158.         var active = document.querySelector(".slider>.images>.active");
  160.         imgs.forEach(function (item) {
  161.           item.classList.remove("active");
  162.         });
  163.         if (active.nextElementSibling) {
  164.           nex = active.nextElementSibling;
  165.         } else {
  166.           nex = imgs[0];
  167.         }
  168.         nex.classList.add("active");
  169.         points.forEach(function (item) {
  170.           item.classList.remove("active");
  171.           // cl(item.dataset.index);
  172.           if (item.dataset.index === nex.dataset.index) {
  173.             item.classList.add("active");
  174.           }
  175.         });
  176.       },
  177.       false
  178.     );
  180.     // //自动播放
  181.     var slider = document.querySelector(".slider");
  182.     // cl(slider);
  183.     //移出自动播放
  184.     slider.addEventListener("mouseout", timer, false);
  185.     //定时器
  186.     var timer = setInterval(function () {
  187.       var click = new Event("click");
  188.       next.dispatchEvent(click);
  189.     }, 2000);
  190.     //移入清除定时器
  191.     slider.addEventListener(
  192.       "mouseover",
  193.       function () {
  194.         clearInterval(timer);
  195.       },
  196.       false
  197.     );
  198.   </script>
  199. </html>

2.代码运行效果：

总结：

1、经典案例主要操作是DOM操作，创建元素、获取元素、修改元素属性、删除元素
2、parentElement:父级元素；ul.insertBefore(li1,li2);把li1插入ul中li2之前；
3、事件委托时：触发事件，要区分非元素节点和父级元素以及子的元素
4、document.documentElement.clientHeight：获取文档可视区域大小；window.addEventListener();窗口监听函数；document.documentElement.scrollTop; 文档滚动大小；
5、new Event()创建模拟事件；setInterval(callback,time)定时执行函数;

上一条：PHP基础：数组函数之分割与合并、检查与获取、排序与差集、取出与移除下一条：JavaScript获取DOM元素，变量节点元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多