Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）
Blogger Information
Blog 32
fans 0
comment 0
visits 22259
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）
培(信仰)
Original
905 people have browsed it

js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，简易轮播图）

classList：设置元素的类样式

  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>classList</title>
  7.     <style>
  9.     .red {
  10.         color:red;
  11.     }
  12.     .bg {
  13.         background-color: yellow;
  14.     }
  15.     .green{
  16.         color:green;
  17.     }
  18.     </style>
  19. </head>
  20. <body>
  21.     <!-- <p class="red bg">欢迎</p> -->
  22.     <p>欢迎</p>
  23.     <script>
  24.         const p =document.querySelector("p");
  25.         // p.className='red';
  26.         // p.className='red bg';
  27.         // classList:用来动态的设置元素的类样式
  28.         //对象有属性和方法
  29.         // p.classList.add("red");
  30.         // p.classList.add("bg")
  31.         // p.classList.remove("bg");
  32.         // p.classList.add("green","bg");
  33.         // p.classList.replace("green","red");
  34.         //toggle()动态切换：如果样式表有red 就移除，没有就添加
  35.         p.classList.toggle("red");
  36.     </script>
  37. </body>
  38. </html>

dataset对象：自定义属性

  1.     <!-- id:预定义属性 -->
  2.     <!-- email:自定义属性 -->
  4.     <p id='aaa' data-email='a@php.cn' data-my-age='40' data-index="1">我的资料</p>
  5.     <script>
  6.         const p = document.querySelector("p");
  7.         //使用getAttribute()方法获取自定义属性
  8.         // const email = p.getAttribute("email");
  9.         // console.log(email);
  11.         // dataset:读写自定义属性，但是这个属性在HTML中必须使用 'data-' 为前缀
  12.         // js代码中data- 前缀必须省；之后还有连接线时，连接线必须省去，原连接线后的首字母必须大写
  13.         console.log(p.dataset.email);
  14.         console.log(p.dataset.myAge);
  15.         console.log(p.dataset.index);
  16.     </script>

案例

选项卡

知识点：
数组的遍历： forEach()
数组的筛选： filter()
classList属性：classList.remove(),classList.add()

  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.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #555;
  16.       }
  17.       a:hover {
  18.         text-decoration: underline;
  19.         color: red;
  20.       }
  21.       li {
  22.         list-style: none;
  23.         line-height: 1.6em;
  24.       }
  25.       li:hover{
  26.         cursor:default;
  27.       }
  28.       .tabs {
  29.         width: 300px;
  30.         height: 300px;
  31.         margin: 30px;
  32.         background-color: #e6e6e6;
  34.         display: flex;
  35.         flex-direction: column;
  36.       }
  37.       .tab {
  38.         height: 36px;
  39.         display: flex;
  40.       }
  41.       .tab li {
  42.         flex: auto;
  43.         text-align: center;
  44.         line-height: 36px;
  45.         background-color: #fff;
  46.       }
  47.       .tab li.active {
  48.         background-color: #e6e6e6;
  49.       }
  50.       .tab li:hover {
  51.         cursor: pointer;
  52.       }
  53.       .item{
  54.         padding: 20px;
  55.         display: none;
  56.       }
  57.       .item.active {
  58.         display: block;
  59.       }
  60.     </style>
  61.   </head>
  62.   <body>
  63.     <div class="tabs">
  64.       <!-- 导航 -->
  65.       <ul class="tab">
  66.         <li class="active" data-index="1">省内</li>
  67.         <li data-index="2">国内</li>
  68.         <li data-index="3">国际</li>
  69.       </ul>
  70.       <!-- details -->
  71.       <ul data-index="1" class="item active" >
  72.         <li><a href="">省内新闻</a></li>
  73.         <li><a href="">省内新闻省内新闻</a></li>
  74.         <li><a href="">省内新闻省内新闻省内新闻</a></li>
  75.       </ul>
  76.       <ul data-index="2" class="item">
  77.         <li><a href="">国内国内国内国内</a></li>
  78.         <li><a href="">国内国内国内国内国内</a></li>
  79.         <li><a href="">国内国内国内国内</a></li>
  80.       </ul>
  81.       <ul data-index="3" class="item">
  82.         <li><a href="">国际国际国际国际国际国际</a></li>
  83.         <li><a href="">国际国际国际国际国际</a></li>
  84.         <li><a href="">国际国际国际国际</a></li>
  85.       </ul>
  86.     </div>
  87.     <script>
  88.       const tab = document.querySelector(".tab");
  89.       const items = document.querySelectorAll(".item");
  90.       //1. 清空之前所有出于激活状态的选项卡，并将当前点击对象激活
  91.       tab.onclick = (ev) => {
  92.         // 事件绑定对象
  93.         // console.log(ev.currentTarget);
  94.         //事件触发对象
  95.         // console.log(ev.target);
  96.         [...tab.children].forEach((item) => item.classList.remove("active"));
  97.         ev.target.classList.add("active");
  99.         //2. 根据自定义属性data-index找到对应的列表并显示
  100.         //NodeList对象内置了forEach接口
  101.         items.forEach(item => item.classList.remove("active"));
  102.         console.log(ev.target);
  103.         [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");
  104.       };
  105.     </script>
  106.   </body>
  107. </html>

一键换肤

知识点：
动态修改 body.style.backgroundImage 值

  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.         .container {
  9.             width: 300px;
  10.             display: grid;
  11.             grid-template-columns: repeat(3,1fr);
  12.             column-gap:10px;
  14.         }
  15.         .container>img{
  16.             width: 100%;
  17.             border:3px solid #fff;
  18.             opacity: 0.6;
  19.         }
  20.         .container > img:active {
  21.             opacity: 1;
  22.         }
  23.         .container > img:hover {
  24.             opacity: 1;
  25.             cursor:pointer;
  26.             width: 105%;
  27.         }
  28.         body {
  29.             background-image: url("static/images/1.jpg");
  30.             background-repeat: no-repeat;
  31.             background-size: cover;
  32.         }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <img src="static/images/1.jpg" alt="" />
  38.       <img src="static/images/2.jpg" alt="" />
  39.       <img src="static/images/3.jpg" alt="" />
  40.     </div>
  41.     <script>
  42.         //事件代理，不需要给每个图片的缩略图添加点击事件，只需要给父元素添加就可以了
  43.         // document.querySelector(".container").onclick = ev=>document.body.backgroundImage = "url("+ev.target.src+")";
  45.         const box = document.querySelector(".container");
  46.         box.onclick = function (ev) {
  47.           const body = document.body;
  48.           let imgUrl = "url("+ev.target.src+")";
  49.           body.style.backgroundImage = imgUrl;
  50.         }
  51.     </script>
  52.   </body>
  53. </html>

图片懒加载

懒加载原理
先将图片的url地址存到自定义属性 data-src 中,当图片top值<视口+滚动高度时 用 data-src 替换 src值
img.offsetTop < clientHeight + document.documentElement.scrollTop

知识点：setTimeout(),两个事件 scroll,load

  1.         //视口高度
  2.         let viewHeight = document.documentElement.clientHeight;
  3.         //滚动高度
  4.         document.onscroll = ev=>{
  5.             console.log(document.documentElement.scrollTop);
  6.         }
  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.       .container {
  9.         width: 500px;
  10.         display: grid;
  11.         gap: 10px;
  12.         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  13.       }
  14.       .container img {
  15.         width: 100%;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div class="container">
  21.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  22.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  23.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  24.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  25.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  26.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  27.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  28.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  29.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  30.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  32.     </div>
  33.     <script>
  34.       // const imgs =document.images;
  35.       const images = document.querySelectorAll(".container img");
  36.       const clientHeight = document.documentElement.clientHeight;
  38.       window.addEventListener("scroll", layzyload);
  39.       window.addEventListener("load", layzyload);
  41.       function layzyload() {
  42.         images.forEach((img) => {
  43.           if (img.offsetTop < clientHeight + document.documentElement.scrollTop)
  44.             setTimeout(() => (img.src = img.dataset.src), 500);
  45.         });
  46.       }
  47.       // images
  48.     </script>
  49.   </body>
  50. </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.     <link rel="stylesheet" href="banner/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <!-- 1. 图片组 -->
  12.       <nav class="imgs">
  13.         <a href="#"
  14.           ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
  15.         /></a>
  16.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  17.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  18.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  19.       </nav>
  20.       <!-- 2. 图片小按钮 -->
  21.       <nav class="btns">
  22.         <!-- 应该根据图片的数量自动生成 -->
  23.         <!-- <a href="" data-index="1" class="active"></a>
  24.             <a href="" data-index="2"></a>
  25.             <a href="" data-index="3"></a>
  26.             <a href="" data-index="4"></a> -->
  27.       </nav>
  28.       <!-- 3. 翻页按钮 -->
  29.       <nav class="skip">
  30.         <a href="#" class="prev">&lt;</a>
  31.         <a href="#" class="next">&gt;</a>
  32.       </nav>
  33.     </div>
  34.     <script>
  35.       // 所有图片
  36.       const imgs = document.querySelectorAll(".container > .imgs img");
  37.       //按钮组
  38.       const btnGroup = document.querySelector(".container > .btns");
  39.       // 翻页按钮
  40.       const skip = document.querySelectorAll(".container > .skip > a");
  42.       // 创建出一组与图片数量一致的小按钮
  43.       function autoCreateBtns(ele, imgCount) {
  44.         const frag = document.createDocumentFragment();
  45.         for (let i = 0; i < imgCount; i++) {
  46.           const a = document.createElement("a");
  47.           a.href = "#";
  48.           a.dataset.index = i + 1;
  49.           if (i === 0) a.classList.add("active");
  50.           frag.appendChild(a);
  51.         }
  52.         ele.appendChild(frag);
  53.       }
  54.       //   调用创建小按钮的函数
  55.       autoCreateBtns(btnGroup, imgs.length);
  57.       // 为刚刚生成的小按钮添加点击事件
  58.       const btns = document.querySelectorAll(".container > .btns > *");
  59.       // 写两个公共函数
  60.       // 1. 获取激活的元素
  61.       function getActiveEle(eles) {
  62.         let activities = [...eles].filter((img) =>
  63.           img.classList.contains("active")
  64.         );
  65.         return activities.shift();
  66.       }
  67.       // 2. 设置激活元素,根据按钮索引更新正在显示的图片
  68.       function setActiveEle(btnIndex) {
  69.         [imgs, btns].forEach((arr) => {
  70.           // 将之前的状态重置到初始化
  71.           getActiveEle(arr).classList.remove("active");
  72.           arr.forEach((item) => {
  73.             if (item.dataset.index === btnIndex) {
  74.               item.classList.add("active");
  75.             }
  76.           });
  77.         });
  78.       }
  80.       btns.forEach((btn) =>
  81.         btn.addEventListener("click", (ev) =>
  82.           setActiveEle(ev.target.dataset.index)
  83.         )
  84.       );
  86.       let iMax = imgs.length;
  87.       //上一张
  88.       let prevSkip = document.querySelector(".prev");
  89.       prevSkip.addEventListener("click", () => {
  90.         let iIndex = getActiveEle(imgs).dataset.index;
  91.         let iPrev = parseInt(iIndex) - 1;
  93.         iPrev < 1
  94.           ? setActiveEle(iMax.toString())
  95.           : setActiveEle(iPrev.toString());
  96.       });
  97.       //下一张
  98.       let nextSkip = document.querySelector(".next");
  99.       nextSkip.addEventListener("click", () => {
  100.         let iIndex = getActiveEle(imgs).dataset.index;
  101.         let iNext = parseInt(iIndex) + 1;
  103.         iNext > iMax
  104.           ? setActiveEle("1")
  105.           : setActiveEle(iNext.toString());
  106.       });
  107.       //事件派发
  108.       startInterval = function () {
  109.         const ev = new Event("click");
  110.         nextSkip.dispatchEvent(ev);
  111.       };
  112.       //使用间歇式定时器
  113.       let intervalID = setInterval(startInterval, 2000);
  115.       let container = document.querySelector(".container");
  117.       container.addEventListener("mouseover", () => clearInterval(intervalID));
  119.       container.addEventListener(
  120.         "mouseleave",
  121.         () => (intervalID = setInterval(startInterval, 2000))
  122.       );
  124.     </script>
  125.   </body>
  126. </html>

小结：调试过程中因为没有将事件派发封装，直接使用 setInterval() 设置派发造成一直无法达到效果。
由于没有了解setInterval用法造成时间的浪费，吃一堑长一智吧。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post