search

博客列表 >JS原生案例：选项卡、切换背景图、懒加载、轮播图案例

JS原生案例：选项卡、切换背景图、懒加载、轮播图案例

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2021年01月12日 19:54:58913浏览

知识点补充：

1.insetBefore(new,ref(参考元素))：在某元素之前插入DOM原生操作没有insertAfter();
2.appendChild():如果是父元素就在父元素最后一个子元素之后插入，如果没有子元素就在元素本身之后插入
3.Element.contains("class")判断是否包含没class属性，返回布尔值；
4.Element.getAttribute()获取指定元素的属性的值；
5.自定义属性，通过dataset获取和设置
6.获取元素的子元素集合和节点集合:

  • children:获取子元素集合;
  • childNodes:获取所有节点集合(包含文字和空格以及回车);

案例练习

1.选项卡

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>选项卡</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         ul{
  15.             list-style: none;
  16.         }
  17.         .container{
  18.             height: 500px;
  19.             width: 400px;
  20.             margin: 0 auto;
  21.             display: grid;
  22.             grid-template-rows: 100px 400px;
  23.         }
  24.         .container > ul{
  25.             display: flex;
  26.             justify-content: flex-start;
  27.             width: 400px;
  28.             align-items: center;
  30.         }
  31.         .item{
  32.             flex:1;
  33.             height: 100px;
  34.             text-align: center;
  35.             line-height: 100px;
  36.             background-color: lightgray;
  37.         } 
  38.         .ulactive{
  39.             background-color: lightcoral;
  40.         }
  41.         .img{
  42.             width: 400px;
  43.             display: none;
  44.         }
  45.         .item:hover{
  46.             cursor:pointer;
  47.         }
  48.         .active{
  49.             display: block;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <div class="container">
  55.         <ul>
  56.             <li class="item ulactive" data-index="1">选项卡1</li>
  57.             <li class="item" data-index="2">选项卡2</li>
  58.             <li class="item" data-index="3">选项卡3</li>
  59.         </ul>
  60.         <div>
  61.             <img src="images/products%20(1).jpg" alt="" class="img active" data-index="1">
  62.             <img src="images/products%20(2).jpg" alt="" class="img" data-index="2">
  63.             <img src="images/products%20(7).jpg" alt="" class="img"data-index="3">
  64.         </div>
  65.     </div>
  67. </body>
  68. <script type="text/javascript">
  69.     let ul= document.querySelector(".container>ul");
  70.     let imgs=document.querySelectorAll(".container > div > img");
  71.     function ulactive(ul,name){
  72.         // console.log(Array.from(ul));
  73.         Array.from(ul).forEach(item=>{
  74.             // console.log(item);
  75.             item.classList.remove(name);
  76.         });
  77.     }
  78.     ul.addEventListener("click",ev=>{
  79.         // console.log(ev.currentTarget.childNodes);
  80.         // console.log(ev.currentTarget.children);
  81.         ulactive(ev.currentTarget.children,"ulactive");
  82.         ev.target.classList.add("ulactive");
  83.         let index=ev.target.dataset.index;
  84.         // console.log(imgs);
  85.         imgs.forEach(item=>{
  86.             if(item.dataset.index===index){
  87.                 ulactive(imgs,"active")
  88.                 item.classList.add("active");
  89.             }
  90.         })
  92.     });
  93. </script>
  94. </html>

运行结果

2.换背景

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>切换背景图片</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container{
  16.             height: 500px;
  17.             width: 400px;
  18.             margin: 0 auto;
  19.             background-image: url("images/products%20(1).jpg");
  21.         }
  22.         .img{
  23.             width: 50px;
  24.             opacity:0.8;
  25.             border: 4px solid white;
  26.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="container">
  32.         <div>
  33.             <img src="images/products%20(1).jpg" alt="" class="img active" data-index="1">
  34.             <img src="images/products%20(2).jpg" alt="" class="img" data-index="2">
  35.             <img src="images/products%20(7).jpg" alt="" class="img"data-index="3">
  36.         </div>
  37.     </div>
  39. </body>
  40. <script type="text/javascript">
  41.     let container=document.querySelector(".container");
  42.     let div=document.querySelector(".container > div");
  44.     div.addEventListener("click",ev=>{
  45.         let src=ev.target.getAttribute("src");
  46.         container.style.backgroundImage=`url("${src}")`;
  47.     });
  48. </script>
  49. </html>

运行结果

3.懒加载

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>我的相册</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             background-color: #FFB6C1;
  16.         }
  17.         body > div:first-child{
  18.             width:6rem ;
  19.             margin: 2rem auto;
  20.             text-align: center;
  21.             color: #fff;
  22.         }
  23.         .container{
  24.             display: grid;
  25.             grid-template-columns: repeat(auto-fit,minmax(12rem,1fr));
  26.             grid-gap: 2rem;
  27.             padding: 2rem;
  28.         }
  29.         .container > .item {
  30.             display: flex;
  31.             flex-flow: column nowrap;
  32.             width: 12rem;
  33.             height: 13rem;
  34.             align-items: center;
  35.             background-color: #fff;
  36.             border-radius: 0.5rem;
  37.             justify-content: space-evenly;    
  38.         }
  39.         .container > .item > img{
  40.             width: 10rem;
  41.             height: 12rem,;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div><h2>我的相册</h2></div>
  48.     <div class="container">
  49.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片1</span></div>
  50.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片2</span></div>
  51.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片3</span></div>
  52.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片4</span></div>
  53.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片5</span></div>
  54.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片6</span></div>
  55.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片7</span></div>
  56.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片8</span></div>
  57.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片9</span></div>
  58.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片10</span></div>
  59.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片11</span></div>
  60.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片12</span></div>
  61.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片13</span></div>
  62.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片14</span></div>
  63.         <div class="item"><img src="images/default.png"  data-src="images/bg.jpg" alt=""><span>图片15</span></div>
  64.     </div>
  66. </body>
  67. <script>
  68.     let items=document.querySelectorAll(".item");
  69.     // console.log(items);
  70.     let item=document.querySelector(".item");
  71.     function changeurl(items){
  72.         let scrollHeight=document.documentElement.scrollTop;
  73.         let viewHeight=document.documentElement.clientHeight;
  75.         items.forEach(item=>{
  76.             let itemHeight=item.offsetTop;
  77.             if (itemHeight<(scrollHeight+viewHeight)){
  78.                         img=item.firstElementChild;
  79.                         src=img.dataset.src;
  80.                         img.setAttribute("src",src);
  81.                         console.log("图片加载…………");
  82.                     }
  83.         })
  85.     }
  86.     window.addEventListener("scroll",()=>{
  88.             setTimeout(changeurl(items),500);
  90.     });
  91.     window.addEventListener("load",()=>{
  93.             setTimeout(changeurl(items),    0);
  95.     });
  97. </script>
  98. </html>

运行结果
、

4.轮播图

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>轮播图</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin:0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     .container{
  16.         width: 800px;
  17.         height: 200px;
  18.         margin: 3px auto;
  19.         position: relative;
  20.     }
  21.     .img{
  22.         width: 800px;
  23.         height: 266px;
  24.         display: none;
  25.     }
  26.     .dp{
  27.         display: block;
  28.     }
  29.     .skip{
  30.         width: 800px;
  31.         display: flex;
  32.         justify-content: space-between;
  33.         position: absolute;
  34.         top:100px;
  35.     }
  36.     .skip > span{
  37.         width: 60px;
  38.         height: 80px;
  39.         background-color:lightslategray;
  40.         font-size: 40px;
  41.         color: white;
  42.         line-height: 80px;
  43.         text-align: center;
  44.         opacity: 0.6;
  45.     }
  46.     .skip > span:hover{
  47.         opacity: 1;
  48.         cursor: pointer;
  49.     }
  50.     .pointer{
  51.         width: 800px;
  52.         display: flex;
  53.         justify-content: center;
  54.         position: absolute;
  55.         top:240px
  56.     }
  57.     .dot{
  58.         /* width: 6px; */
  59.         border: 6px solid #000000;
  60.         border-radius: 6px;
  61.         margin: 0 4px;
  63.     }
  64.     .dotactive{
  65.         border-color: white;
  66.     }
  67.     .pointer > span:hover{
  68.         cursor: pointer;
  69.         border-color: white;
  70.     }
  72. </style>
  73. <body>
  74.     <div class="container">
  75.         <div class="banner">
  76.             <img src="banner/banner1.jpg" data-index="1" class="img dp" alt="">
  77.             <img src="banner/banner2.jpg" data-index="2" class="img" alt="">
  78.             <img src="banner/banner3.jpg" data-index="3" class="img" alt="">
  79.             <img src="banner/banner4.jpg" data-index="4" class="img" alt="">
  80.         </div>
  81.         <div class="skip">
  82.             <span id="prev">&lt;</span>
  83.             <span id="next">&gt;</span>
  84.         </div>
  85.         <div class="pointer">
  87.         </div>
  88.     </div>
  89. </body>
  90. <script type="text/javascript">
  91.     // 获取图片
  92.     let imgs=document.querySelectorAll(".img");
  93.     //根据图片数量生成小圆点
  94.     function createdot(num,ref){
  95.         let farg=document.createDocumentFragment();
  96.         for(i=0;i<num;i++){
  97.             let span=document.createElement("span")
  98.             span.dataset.index=i+1;
  99.             span.classList.add("dot");
  100.             if(i===0){
  101.                 span.classList.add("dotactive");
  102.             }
  103.             farg.appendChild(span);
  104.         }
  105.         ref.appendChild(farg);
  106.     }
  107.     // 获取生成小圆点的参照
  108.     let pointer=document.querySelector(".pointer");
  109.     // 生成小圆点
  110.     createdot(imgs.length,pointer);
  111.     // 创建激活函数
  112.     function active(items,target,cl){
  113.         Array.from(items).forEach(item=>{
  114.             item.classList.remove(cl);
  115.         })
  116.         target.classList.add(cl);
  117.     }
  118.     // 根据点击小圆点切换图片
  119.     pointer.addEventListener("click",ev=>{
  120.         let dots=ev.currentTarget.children;
  121.         if(ev.target.tagName==="SPAN"){
  122.             active(dots,ev.target,"dotactive");
  123.             let index=ev.target.dataset.index;
  124.             imgs.forEach(item=>{
  125.                 item.classList.remove("dp")
  126.                 if(item.dataset.index===index){
  127.                     item.classList.add("dp");
  128.                 }
  129.             })
  130.         }
  132.     });
  133.     // 获取前一张按钮
  134.     let prev=document.querySelector(".skip span:first-of-type");
  136.     prev.addEventListener("click",ev=>{
  138.         let currentimg=[...imgs].filter(item=>{
  139.             if(item.classList.contains("dp")){
  140.                 return item
  141.             }
  142.         })[0];
  143.         let index=currentimg.dataset.index;
  145.         let nextindex = index==="1"?imgs.length:index-1;
  147.         [...imgs].forEach(item=>{
  148.             if(item.dataset.index==nextindex){
  149.                 // console.log(item);
  150.                 active(imgs,item,"dp");
  151.             }
  152.         })
  153.         let dots=document.querySelectorAll(".pointer *")
  155.         dots.forEach(item=>{
  156.             if(item.dataset.index==nextindex){
  157.                 // console.log(item);
  158.                 active(dots,item,"dotactive");
  159.             }
  160.         })
  163.     })
  164.     // 获取下一张
  165.     let next=document.querySelector(".skip span:last-of-type");
  166.     // let click=new Event("click");
  167.     next.addEventListener("click",ev=>{
  168.         let currentimg=[...imgs].filter(item=>{
  169.             if(item.classList.contains("dp")){
  170.                 return item
  171.             }
  172.         })[0];
  173.         let index=currentimg.dataset.index;
  174.         // console.log(index);
  176.         let nextindex = index==="4"? 1 :parseInt(index)+1;
  177.         // console.log(nextindex);
  179.         [...imgs].forEach(item=>{
  180.             if(item.dataset.index==nextindex){
  181.                 // console.log(item);
  182.                 active(imgs,item,"dp");
  183.             }
  184.         })
  185.         let dots=document.querySelectorAll(".pointer *")
  187.         dots.forEach(item=>{
  188.             if(item.dataset.index==nextindex){
  189.                 // console.log(item);
  190.                 active(dots,item,"dotactive");
  191.             }
  192.         })
  193.     })
  195.     function timer(){
  196.         let cl=new Event("click"); 
  197.         next.dispatchEvent(cl);
  198.     }
  199.     let time=setInterval(timer,1000);
  202.     let container=document.querySelector(".container");
  203.     // 鼠标移入暂停自动播放
  204.     container.addEventListener("mouseover",ev=>{
  205.         clearInterval(time);
  206.     })
  207.     // 鼠标移出自动播放
  208.     container.addEventListener("mouseout",ev=>{
  209.         time=setInterval(timer,1000);
  210.     })
  214. </script>
  215. </html>

运行结果

上一条：CSS进阶知识响应式单位原理与应用下一条：PHP8安装配置与Laravel8的入门
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多