PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

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

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. }

静态资源(图片)未上传

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议