search

博客列表 >JavaScript初学习/之classList：动态设置元素类、dataset: 读写自定义属性、选项卡、一键换肤、图片轮播

JavaScript初学习/之classList：动态设置元素类、dataset: 读写自定义属性、选项卡、一键换肤、图片轮播

景云
景云原创
2021年03月05日 15:19:261002浏览

1.classList：动态设置元素类、

CSS

  1. .red{
  2.         color: red;
  3. }
  4. .green{
  5.     color: green;
  6. }
  7. .bgb{
  8.     background-color: blue;
  9. }
  10. .bgy{
  11.     background-color: yellow;
  12. }

HTML

<p class="bgy">好好学习，天天向上</p>

JavaScript

  1. const p=document.querySelector("p");
  2. // classList:动态设置元素的类
  3. // 添加类
  4. p.classList.add("red");//将字体颜色修改为红色
  5. // 移出类
  6. p.classList.remove("red");//将字体颜色红色去掉
  7. // 替换类
  8. p.classList.replace("bgy","bgb");//将背景颜色由黄色改为蓝色
  9. // 动态切换：有则删，无则加
  10. p.classList.toggle("red");//如果字体为红色则去掉，如果字体不是红色则改为红色

2.dataset: 读写自定义属性

HTML
<p data-name="Jy" data-my-age="27">个人资料</p>

JavaScript

  1. // dataset: 读写自定义属性，必须使用“data-”为前缀
  2. const p=document.querySelector("p");
  3. console.log(p.dataset.name);//Jy
  4. console.log(p.dataset.myAge);//27

3.选项卡

CSS

  1. * {
  2.           margin: 0;
  3.           padding: 0;
  4.           box-sizing: border-box;
  5.         }
  6.         a {
  7.           text-decoration: none;
  8.           color: #555;
  9.         }
  10.         a:hover {
  11.           text-decoration: underline;
  12.           color: red;
  13.         }
  14.         li {
  15.           list-style: none;
  16.           line-height: 1.6em;
  17.         }
  18.         li:hover {
  19.           cursor: default;
  20.         }
  21.         .tabs {
  22.           width: 300px;
  23.           height: 300px;
  24.           margin: 30px;
  25.           background-color: #e6e6e6;
  26.           display: flex;
  27.           flex-direction: column;
  28.         }
  29.         .tab {
  30.           height: 36px;
  31.           display: flex;
  32.         }
  33.         .tab li {
  34.           flex: auto;
  35.           text-align: center;
  36.           line-height: 36px;
  37.           background-color: #fff;
  38.         }
  39.         .tab li.active {
  40.           background-color: #e6e6e6;
  41.         }
  42.         .tab li:hover {
  43.           cursor: pointer;
  44.         }
  45.         /* 默认所有选项卡只有一个显示,其它隐藏 */
  46.         .item {
  47.           padding: 20px;
  48.           display: none;
  49.         }
  50.         .item.active {
  51.           display: block;
  52.         }

HTML

  1. <div class="tabs">
  2.     <ul class="tab">
  3.         <li class="active" data-index="1">国际</li>
  4.         <li data-index="2">国内</li>
  5.         <li data-index="3">省内</li>
  6.     </ul>
  7.     <ul class="item active" data-index="1">
  8.        <li><a href="">国际新闻11</a></li>
  9.        <li><a href="">国际新闻22</a></li>
  10.        <li><a href="">国际新闻33</a></li>
  11.     </ul>
  12.     <ul class="item" data-index="2">
  13.        <li><a href="">国内新闻111</a></li>
  14.        <li><a href="">国内新闻222</a></li>
  15.        <li><a href="">国内新闻333</a></li>
  16.     </ul>
  17.     <ul class="item" data-index="3">
  18.        <li><a href="">省内新闻1111</a></li>
  19.        <li><a href="">省内新闻2222</a></li>
  20.        <li><a href="">省内新闻3333</a></li>
  21.     </ul>
  22. </div>

JavaScript

  1. const tab=document.querySelector(".tab");
  2. const items=document.querySelectorAll(".item");
  3. // 给导航添加点击事件
  4. tab.onclick=ev=>{
  5.     //1.将之前所以激活的样式取消|children:获取所以子元素|遍历子元素将其激活的类去掉|Nodelist对象默认内置了forEach方法 [...tab.children].forEach(item=>item.classList.remove("active"));
  6.     // 2.通过导航的事件触发者来设置类
  7.     ev.target.classList.add("active");
  8.     // 3.同样先移出列表激活的类
  9. items.forEach(item=>item.classList.remove("active"));
  10.     // 4.过滤列表组，通过对比事件触发者的data-index和列表的data-index进行比较，然后激活|数组过滤完也是数组，所以要设置数组的第一个元素
  11.             [...items].filter(item=>item.dataset.index===ev.target.dataset.index)[0].classList.add("active");
  12. }

4.一键换肤

CSS

  1. .container{
  2.             width: 300px;
  3.             display: grid;
  4.             grid-template-columns: repeat(3,1fr);
  5.             gap: 10px;
  6.         }
  7.         .container>img{
  8.             width: 100%;
  9.             border: 3px solid #fff;
  10.             opacity: 0.6;
  11.         }
  12.         .container .active{
  13.             opacity: 1;
  14.         }
  15.         .container>img:hover{
  16.             width: 105%;
  17.             opacity: 1;
  18.             cursor: pointer;
  19.         }
  20.         body{
  21.             background: url("static/images/1.jpg") no-repeat;
  22.             background-size: cover;
  23.         }

HTML

  1. <div class="container">
  2.     <img src="/0111/static/images/1.jpg" class="active">
  3.     <img src="/0111/static/images/2.jpg">
  4.     <img src="/0111/static/images/3.jpg">
  5. </div>

JavaScript

  1. // 给图片组的父元素添加点击事件，将事件触发者的src属性设置给body的背景图
  2. const container=document.querySelector(".container");
  3. container.onclick=ev=>{
  4.     document.body.style.backgroundImage="url("+ ev.target.src +")";
  5.     //先将之前的激活状态取消
  6.             [...container.children].forEach(item=>item.classList.remove("active"));
  7.     //再将激活的缩略图选中
  8.     ev.target.classList.add("active");
  9. }

静态资源（图片）未上传

5.图片懒加载

html

  1. <div class="container">
  2.     <img src="images/temp.jpg" data-src="images/img-1.jpg">
  3.     <img src="images/temp.jpg" data-src="images/img-2.jpg">
  4.     <img src="images/temp.jpg" data-src="images/img-3.jpg">
  5.     <img src="images/temp.jpg" data-src="images/img-4.jpg">
  6.     <img src="images/temp.jpg" data-src="images/img-5.jpg">
  7.     <img src="images/temp.jpg" data-src="images/img-6.jpg">
  8.     <img src="images/temp.jpg" data-src="images/img-7.jpg">
  9.     <img src="images/temp.jpg" data-src="images/img-8.jpg">
  10.     <img src="images/temp.jpg" data-src="images/img-9.jpg">
  11. </div>

JavaScript

  1. // 获取视口高度
  2. let clientHeight=document.documentElement.clientHeight;
  3. const imgs=document.querySelectorAll(".container img");
  4. //添加窗口滚动监听事件,达到触发条件则执行图片加载
  5. window.addEventListener("scroll",layzyload);
  6. // 设置页面加载后执行一次监听事件，以显示视口内图片
  7. window.addEventListener("load",layzyload);
  8. function layzyload(){
  9.     // 获取滚动高度
  10.     let scrollTop=document.documentElement.scrollTop;
  11.     //遍历图片并判断图片是否进入可视区
  12.     imgs.forEach(img=>{
  13.     //图片距离顶部的距离小于视口高度加滚动高度，则进入可视区
  14.     if(img.offsetTop<clientHeight+scrollTop){
  15.             img.src=img.dataset.src;
  16.         }
  17.     })
  18. }

静态资源（图片）未上传

6.图片轮播

CSS

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  11. /* 轮播图的容器 */
  12. .container {
  13.   width: 62.5em;
  14.   height: 22em;
  15.   margin: 1em auto;
  16.   /* 转为定位元素/定位父级 */
  17.   position: relative;
  18. }
  19. /* 图片组 */
  20. .container > .imgs img {
  21.   width: 100%;
  22.   height: 100%;
  24.   /* 默认全部隐藏 */
  25.   display: none;
  27.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  28.   position: absolute;
  29.   left: 0;
  30.   top: 0;
  31. }
  33. /* 设置默认显示的图片(第一张) */
  34. .container > .imgs img.active {
  35.   display: block;
  36. }
  38. /* 按钮组(独立按钮) */
  39. .container > .btns {
  40.   position: absolute;
  41.   left: 0;
  42.   right: 0;
  43.   bottom: 0;
  44.   /* 水平居中 */
  45.   text-align: center;
  46. }
  47. .container > .btns a {
  48.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  49.   display: inline-block;
  50.   padding: 0.5em;
  51.   margin: 0 0.2em;
  52.   background-color: #fff;
  53.   border-radius: 50%;
  54. }
  55. .container > .btns a.active {
  56.   background-color: #000;
  57. }
  58. /* 翻页按钮 */
  59. .container .skip a {
  60.   position: absolute;
  61.   width: 2.5rem;
  62.   height: 5rem;
  63.   line-height: 5rem;
  64.   text-align: center;
  65.   opacity: 0.3;
  66.   top: 9rem;
  67.   font-weight: lighter;
  69.   font-size: 2rem;
  70.   background-color: #ccc;
  71. }
  72. .container .skip .prev {
  73.   left: 0;
  74. }
  75. .container .skip .next {
  76.   right: 0;
  77. }
  78. .container .skip *:hover {
  79.   opacity: 0.6;
  80.   color: #666;
  81. }

HTML

  1. <div class="container">
  2.      <!-- 1. 图片组 -->
  3.      <nav class="imgs">
  4.        <a href=""><img src="banner/banner1.jpg" data-index="1" class="active" /></a>
  5.        <a href=""><img src="banner/banner2.jpg" data-index="2" /></a>
  6.        <a href=""><img src="banner/banner3.jpg" data-index="3" /></a>
  7.        <a href=""><img src="banner/banner4.jpg" data-index="4" /></a>
  8.      </nav>
  9.      <!-- 2. 图片小按钮 -->
  10.      <nav class="btns"></nav>
  11.      <!-- 3. 翻页 -->
  12.      <nav class="skip">
  13.        <a href="#" class="prev">&lt;</a>
  14.        <a href="#" class="next">&gt;</a>
  15.      </nav>
  16. </div>

JavaScript

  1. //   1.获取所有图片
  2. const imgs=document.querySelectorAll(".container > .imgs img");
  3. // 按钮组
  4. const btnsGroup=document.querySelector(".container > .btns");
  5. // 翻页按钮
  6. const skips=document.querySelector(".container > .skip");
  7. //创建出一组与图片数量一致的小按钮 ele：插入到什么地方；img:图片数量
  8. function autoCreateBtns(ele,imgLength){
  9.     // 通过文件碎片来完成
  10.     const frag=document.createDocumentFragment();
  11.     for(let i=0;i<imgLength;i++){
  12.         const a=document.createElement("a");// 创建a标签
  13.         a.href="#";
  14.         a.dataset.index=i+1;//设置自定义属性
  15.             if(i===0) a.classList.add("active");//如果是第一个则设置为选中状态
  16.             frag.appendChild(a);//将文档碎片添加到页面中
  17.         }
  18.         ele.appendChild(frag);//添加到按钮组中
  19.     }
  20.     // 调用创建小按钮的函数
  21.     autoCreateBtns(btnsGroup,imgs.length);
  22.     //为刚刚生成的小按钮添加点击事件
  23.     const btns=document.querySelectorAll(".container > .btns > *");
  24.     //下面声明两个公共函数
  25.     // 1.获取激活的元素
  26.     function getActiveEle(eles){
  27.         let active=[...eles].filter(img=>img.classList.contains("active"));//判断元素是否有active类
  28.         return active.shift();//将激活的元素弹出
  29.     }
  30.     // 2.设置激活的元素,根据当前显示图片的索引进行激活
  31.     function setActive(btnIndex){
  32.         [imgs,btns].forEach(arr=>{
  33.         //将之前的激活状态全部清空
  34.         getActiveEle(arr).classList.remove("active");
  35.             arr.forEach(item=>{
  36.                 if(item.dataset.index===btnIndex) item.classList.add("active");
  37.             })
  38.         })
  39.     }
  40.     //为每一个小按钮添加;点击事件     btns.forEach(btn=>btn.addEventListener("click",ev=>setActive(ev.target.dataset.index)));
  41.     // 添加点击右面按钮向下翻页
  42.     skips.addEventListener("click",ev=>{
  43.         // 获取当前图片索引
  44.         const currentIndex=parseInt(getActiveEle(imgs).dataset.index)
  45.         //获取轮播图的数量
  46.         const imgsLength=imgs.length;
  47.         //判断点击哪个按钮，setActiveEle()函数里，判断条件用的(完全等于) ===，所以这里要用toString()，转成字符串
  48.         if(ev.target.classList[0]==="prev"){
  49.             // 点击上一个，则将索引-1，如果到了第一个，则将索引设置为最后一个
  50.             setActive((currentIndex===1?imgsLength:currentIndex-1).toString());
  51.         }else{
  52.             // 点击下一个索引+1,如果到了第一个，则将索引设置为第一个
  53.             setActive((currentIndex===imgsLength?1:currentIndex+1).toString());
  54.         }
  55.     });
  56.     // 自动播放函数，鼠标移入停止播放,移出自动播放
  57.     // 定义定时器
  58.     let timer=null;
  59.     // 页面加载后，启动自动播放函数
  60.     autoMove();
  61.     // 获取轮播图容器
  62.     const container = document.querySelector(".container");
  63.     //添加鼠标移出事件
  64.     container.addEventListener("mouseout", autoMove); 
  65.     //添加鼠标移入事件，清除定时器;
  66.     container.addEventListener("mouseover", () => clearInterval(timer));
  67.     // 自动播放轮播图函数，模拟点击next按钮
  68.     function autoMove() {
  69.          timer = setInterval(() => document.querySelector(".next").click(), 3000);
  70.     }

静态资源（图片）未上传

上一条：Jquery基础知识下一条：Composer常用指令以及自动加载器的使用方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多