简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 使用原生 js 实现选项卡、一键更换背景图片、图片懒加载和轮播图
Blogger Information
Blog 29
fans 1
comment 0
visits 35013
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 实现选项卡、一键更换背景图片、图片懒加载和轮播图
祥子弟弟
Original
1418 people have browsed it

一、选项卡的实现

项卡是由两部分组成，头部是导航部分，内容区是主要内容部分，一下使用 php 中文网主页的一个截图作为示例

选项卡的设计思路:
通过给每个导航区的 li 添加自定义属性，然后让相关联的内容区设置相同的自定义属性,在点击/悬浮在一个 li 上的时候，将其他的内容区内容隐藏起来。

在这里我将导航区下的第一个 li 和其对应的内容区的内容设置为默认打开，即每次刷新时，它都会回到这个默认选项上。

选项卡的内容结构

  1. <body>
  2.   <!-- 设置一个选项卡的内容区块 -->
  3.   <div class="tabs">
  4.     <!-- 导航区 -->
  5.     <ul class="tab">
  6.       <!-- 给每个li定义自定义属然后对应到内容区 -->
  7.       <li class="active" data-index="1">娱乐</li>
  8.       <li data-index="2">新闻</li>
  9.       <li data-index="3">音乐</li>
  10.       <li data-index="4">影视</li>
  11.     </ul>
  12.     <!-- 内容区 -->
  13.     <ul data-index="1" class="item active">
  14.       <li><a href="">梁宏达应邀为央视春晚喜剧语言类小品当高参</a></li>
  15.       <li><a href="">因伤缺席多个舞台是否有压力?喻言称会努力补回来</a></li>
  16.       <li><a href="">刘雨昕称出道夜是难忘的回忆 想要有更多的舞台</a></li>
  17.       <li><a href="">吴宗宪默认辛龙已离开其旗下经纪公司</a></li>
  18.       <li><a href="">...</a></li>
  19.     </ul>
  20.     <ul data-index="2" class="item">
  21.       <li><a href="">如何开好局起好步 习近平这样要求全党</a></li>
  22.       <li><a href="">现场！山东省委书记喊话被困金矿工人 无人回应</a></li>
  23.       <li><a href="">组装原子弹的工程师90岁还要学网购 原来是因为爱情</a></li>
  24.       <li><a href="">抱走佩洛西讲台的男子被捕后 交2.5万美元保释</a></li>
  25.       <li><a href="">...</a></li>
  26.     </ul>
  27.     <ul data-index="3" class="item">
  28.       <li><a href="">后弦原创单曲《铠甲之下》上线 诠释燃魂之心</a></li>
  29.       <li><a href="">王嘉尔宣布将开启个人活动 GOT7解散后成员各自飞</a></li>
  30.       <li><a href="">张学友为石家庄加油：中国抗疫成绩是世界认可的</a></li>
  31.       <li><a href="">韩女团IZONE有望延长活动期限 合同将于4月结束</a></li>
  32.       <li><a href="">...</a></li>
  33.     </ul>
  34.     <ul data-index="4" class="item">
  35.       <li><a href="">阿弗莱克有望执导迪士尼《失落城市的守护者》</a></li>
  36.       <li><a href="">沈腾马丽齐帮忙！常远为何要拍《温暖的抱抱》？</a></li>
  37.       <li><a href="">“性手枪”史蒂夫·琼斯回忆录《手枪》将开拍</a></li>
  38.       <li><a href="">哥谭独立电影奖颁发 《无依之地》获最佳影片</a></li>
  39.       <li><a href="">...</a></li>
  40.     </ul>
  41.   </div>
  42. </body>

由于这个是以前写的，所以新闻并不是很新颖，将就看哈，就是随意找的，并没有什么代表性。

css 样式表可以随你自己设计

  1. /* 样式初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* 去掉li和a样式 */
  9. li {
  10.   list-style-type: none;
  11.   line-height: 1.5rem;
  12. }
  13. li:hover {
  14.   cursor: default;
  15. }
  16. a {
  17.   color: #717171;
  18.   text-decoration: none;
  19. }
  20. a:hover {
  21.   text-decoration: underline;
  22.   color: orange;
  23. }
  25. /* 设置选项卡块的背景颜色以及其他设置 */
  26. .tabs {
  27.   /* border: 1px solid #000; */
  28.   width: 400px;
  29.   margin: 30px auto;
  30.   background-color: #e6e6e6;
  32.   display: flex;
  33.   flex-direction: column;
  34. }
  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. }
  48. .tab li.active {
  49.   background-color: #e6e6e6;
  50. }
  51. .tab li:hover {
  52.   cursor: pointer;
  53. }
  55. /* 默认所有选项卡只有一个显示,其它隐藏 */
  56. .item {
  57.   padding: 20px;
  58.   display: none;
  59. }
  60. .item.active {
  61.   display: block;
  62. }

接下来就是重头戏，DOM 操作，实现选项卡的逻辑
首先要考虑到的是要读取的事件，我们点击事件/鼠标悬浮事件的触发者是 li，但是它是一个子元素，它会冒泡到 ul 上面去，所以我们可以采用事件代理。

  1. // 使用事件代理来对导航区的li操作
  2. const tab = document.querySelector(".tab");
  4. // 获取到内容区的所有列表
  5. const items = document.querySelectorAll(".item");
  7. tab.addEventListener("mouseover", mouseOver);
  9. function mouseOver(ev) {
  10.   //   需要两步：
  11.   //   1. 将之前所有处于的激活状态的选项卡清空，并将当前点击对象激活
  13.   //   我们需要的只是ul下的所有li
  14.   [...tab.children].forEach((item) => {
  15.     // classList更换类样式。使用classList中的remove方法，
  16.     // 移除掉当前导航下的所有li标签class属性的active
  17.     // 然后使用classList中的add方法给事件触发者的class属性添加active
  18.     item.classList.remove("active");
  19.     ev.target.classList.add("active");
  20.   });
  22.   //   2.根据自定义属性data-index找到对应的列表，然后显示出来
  23.   items.forEach((item) => {
  24.     item.classList.remove("active");
  25.     // dataset对象:用户自定义属性
  26.     [...items]
  27.       .filter((item) => item.dataset.index === ev.target.dataset.index)[0]
  28.       .classList.add("active");
  29.   });
  30.   //   console.log([...items][0].dataset.index === 1);
  31.   //   进行筛选，找到当前点击事件data-inex和内容区data-index相同的内容
  32.   //   因为filter返回值是一个数组，所以需要用索引将它取出
  33. }

示例的结果显示如下：

二、一键更换背景图片

一键更换背景图片的原理很简单，就是使用当前的事件触发者图片的 src 换掉 body 标签中 style 属性的backgroundImage的值就行,同样是使用事件代理的方式对其进行 DOM 操作。

就一段代码就设置完了

html 文档结构

  1. <body>
  2.   <div class="container">
  3.     <img src="../img/hf/1.jpg" alt="" />
  4.     <img src="../img/hf/2.jpg" alt="" />
  5.     <img src="../img/hf/3.jpg" alt="" />
  6.     <img src="../img/hf/4.jpg" alt="" />
  7.   </div>
  8. </body>

css 样式表可以自己设计哈，想弄啥样弄啥样

  1. .container {
  2.   width: 400px;
  3.   display: grid;
  4.   grid-template-columns: repeat(4, 1fr);
  5.   column-gap: 10px;
  6. }
  7. .container > img {
  8.   width: 100%;
  9.   border: 3px solid #fff;
  10.   opacity: 0.6;
  11. }
  12. .container > img:active {
  13.   opacity: 1;
  14. }
  15. .container > img:hover {
  16.   opacity: 1;
  17.   cursor: pointer;
  18.   width: 105%;
  19. }
  20. body {
  21.   /* 默认背景为第一个图片 */
  22.   background-image: url("../img/hf/1.jpg");
  23.   width: 100%;
  24.   height: 100%;
  25.   /* 背景图垂直、水平均居中 */
  26.   background-position: center center;
  27.   /* 背景图不平铺 */
  28.   background-repeat: no-repeat;
  29.   /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  30.   background-attachment: fixed;
  31.   /* 让背景图基于容器大小伸缩 */
  32.   background-size: cover;
  33. }
  1. // 事件代理，不需要给每个图片的缩略图添加点击事件，只需要给它的父级添加就可以了
  2. document.querySelector(".container").onclick = (ev) =>
  3.   (document.body.style.backgroundImage = `url(${ev.target.src})`);

成品效果如下示例：（示例图片是我在彼岸图网上下载的，小姐姐都很好看）

三、图片懒加载

图片懒加载的原理：在图片进入到用户可视区时，让自定义的 data-src 的值代替 src 的值
图片懒加载的目的：打开一个网页时，不至于被卡死。图片懒加载只加载当前视口所展现的内容中的图片

当前浏览器执行懒加载过程

html 文档结构
这个图片懒加载需要的图片有点多，就不列出来了，大致的 DOM 结构给出来就行了。

  1. <body>
  2.     <div class="container">
  3.       <img src="../img/ljz/temp.jpg" alt="" data-src="../img/ljz/img-1.jpg" />
  4.       <!-- 下边是一大串图片 -->
  5. </body>

css 样式表就不写了

重头戏是 js 代码

  1. // 获取当前所有图片
  2. const imgs = document.querySelectorAll(".container img");
  3. //   console.log(imgs);
  5. // 拿到当前可视区高度
  6. const clientHeight = document.documentElement.clientHeight;
  7. // 监听当前窗口的滚动事件
  8. window.addEventListener("scroll", lazyLoad);
  9. // 在一进入页面就执行这个操作
  10. window.addEventListener("load", lazyLoad);
  12. // 懒加载函数
  13. function lazyLoad() {
  14.   //拿到滚动高度
  15.   let scrollTop = document.documentElement.scrollTop;
  17.   // 遍历图片并判断是否进入可视区
  18.   imgs.forEach((img) => {
  19.     // 只要当前图片距离文档顶部的偏移量小于可视区高度与滚动高度之和，则将这个图片显示出来
  20.     // Ev.offsetTop:表示元素到文档顶部的偏移量
  21.     // clientHeight是可视区高度，这是一个相对固定的值.scrollTop是滚动高度，它是一个动态的值
  22.     if (img.offsetTop < clientHeight + scrollTop) {
  23.       // 为了显示效果明显，可以设置定时器，让它半秒执行一次
  24.       setTimeout(() => (img.src = img.dataset.src), 500);
  25.     }
  26.   });
  27. }

浏览器显示结果（全都是好看的小姐姐哦）

四、轮播图

轮播图要求的功能：

  • 鼠标滑过小按钮，图片随之移动

  • 鼠标点击左右两端的翻页按钮，图片能随着变化

  • 一但打开页面轮播图中图片每隔 2 秒自动播放，鼠标移入轮播图，图片停止变动，鼠标移除轮播图，图片又开始每隔 2 秒自动播放。

设计思路是将所有图片定位到一个容器上，所有图片共享同一个容器，所有图片设置隐藏状态，然后将第一张图片设为默认图片，图片下方的小按钮根据图片的数量自动生成，小按钮和图片通过自定义属性进行绑定。整体操作通过 dom 完成。

html 文档结构

  1. <body>
  2.   <div class="container">
  3.     <!-- 1.图片组 -->
  4.     <nav class="imgs">
  5.       <a href=""
  6.         ><img
  7.           src="../img/slides/banner1.jpg"
  8.           alt=""
  9.           data-index="1"
  10.           class="active"
  11.       /></a>
  12.       <a href=""
  13.         ><img src="../img/slides/banner2.jpg" alt="" data-index="2"
  14.       /></a>
  15.       <a href=""
  16.         ><img src="../img/slides/banner3.jpg" alt="" data-index="3"
  17.       /></a>
  18.       <a href=""
  19.         ><img src="../img/slides/banner4.jpg" alt="" data-index="4"
  20.       /></a>
  21.     </nav>
  23.     <!-- 2. 图片小按钮 -->
  24.     <nav class="btns">
  25.       <!-- 按钮应该根据图片数量自动生成 -->
  26.     </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. </body>

css 样式表的设计，对于图片一开始的默认设置是在 css 样式表中完成的

  1. /* 初始化 */
  2. * {
  3.   padding: 0;
  4.   margin: 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. }
  19. /* 图片设置 */
  20. .container .imgs img {
  21.   /* 默认设置为全部隐藏 */
  22.   display: none;
  23.   /* 宽度和高度完全适应容器大小 */
  24.   width: 100%;
  25.   height: 100%;
  26.   /* 将所有图片进行定位，所有图片共享一个容器 */
  27.   position: absolute;
  28.   top: 0;
  29.   left: 0;
  30. }
  31. /* 设置默认显示的图片 */
  32. .container .imgs img.active {
  33.   display: block;
  34. }
  36. /* 按钮设置 */
  37. .container .btns {
  38.   /* 将按钮定位到容器的底部 */
  39.   position: absolute;
  40.   left: 0;
  41.   right: 0;
  42.   bottom: 0;
  43.   text-align: center;
  44. }
  46. .container .btns a {
  47.   /* 转成行内块元素: 既能水平排列,还支持宽度设置 */
  48.   display: inline-block;
  49.   /* 用padding撑开内容 */
  50.   padding: 0.5em;
  51.   margin: 0 0.2em;
  52.   background-color: #fff;
  53.   border-radius: 50%;
  54. }
  56. /* 默认选中设置背景色 */
  57. .container .btns a.active {
  58.   background-color: #888;
  59. }
  60. .container .btns a:hover {
  61.   cursor: pointer;
  62. }
  64. /* 翻页按钮设置 */
  66. .container .skip a {
  67.   position: absolute;
  68.   width: 2.5rem;
  69.   height: 5rem;
  70.   line-height: 5rem;
  71.   text-align: center;
  72.   opacity: 0.3;
  73.   top: 9rem;
  74.   font-weight: lighter;
  76.   font-size: 2rem;
  77.   background-color: #ccc;
  78. }
  79. .container .skip .prev {
  80.   left: 0;
  81. }
  82. .container .skip .next {
  83.   right: 0;
  84. }
  85. .container .skip *:hover {
  86.   opacity: 0.6;
  87.   color: #666;
  88. }

js 来进行 dom 操作，让轮播图动起来

  1. // 拿到所有图片
  2. const imgs = document.querySelectorAll(".container > .imgs img");
  4. // 拿到按钮组
  5. const btnGroup = document.querySelector(".container > .btns");
  7. // 拿到翻页按钮
  8. const skip = document.querySelector(".container > .skip");
  10. // 创建一组与图片对应的小按钮
  11. //为了减少dom操作，所以使用文档碎片的方式进行添加
  12. // 函数中的参数分别是父级元素，图片的数量
  13. function autoCreateBtns(ele, imgLength) {
  14.   //采用文档碎片
  15.   const frag = document.createDocumentFragment();
  16.   // 进行a标签的创建
  17.   for (let i = 0; i < imgLength; i++) {
  18.     const a = document.createElement("a");
  19.     a.herf = "#";
  20.     a.dataset.index = i + 1;
  21.     if (i === 0) a.classList.add("active");
  22.     frag.appendChild(a);
  23.   }
  24.   ele.appendChild(frag);
  25. }
  26. //调用创建小按钮的函数
  27. autoCreateBtns(btnGroup, imgs.length);
  29. // 获取到刚刚生成的四个小按钮
  30. const btns = document.querySelectorAll(".container > .btns > *");
  32. // 声明两个公共函数
  33. // 1.获取到当前激活的元素
  34. function getActiveEle(ele) {
  35.   let activeEles = [...ele].filter((img) => img.classList.contains("active"));
  36.   return activeEles.pop();
  37. }
  38. //   getActiveEle(imgs);
  40. // 2.设置激活元素,函数参数是按钮的索引值，根据按钮索引更换显示的图片
  41. function setActiveEle(btnIndex) {
  42.   [imgs, btns].forEach((arr) => {
  43.     //将之前的状态全部清空
  44.     getActiveEle(arr).classList.remove("active");
  45.     // 判断当前事件的索引值是否和传进来的索引值相等，若相等，设置激活
  46.     arr.forEach((item) => {
  47.       if (item.dataset.index === btnIndex) item.classList.add("active");
  48.     });
  49.   });
  50. }
  52. // 为每个小按钮添加事件
  53. btns.forEach((ele) =>
  54.   ele.addEventListener("mouseover", (ev) =>
  55.     setActiveEle(ev.target.dataset.index)
  56.   )
  57. );
  59. skip.addEventListener("click", skipImg, false);
  61. // console.log(skip.children[1]);
  63. // 将前后翻页,使用一个回调统一处理
  64. function skipImg(ev) {
  65.   // 当前激活的图片,实际上这里用不到它,而应该用它的父级<a>来判断是否存在兄弟节点
  66.   let currentImg = getActiveEle(imgs);
  67.   // 当前图片组父元素,注意<img>父级是<a>,<a>的父级才是需要的父节点
  68.   let parentEle = currentImg.parentElement.parentElement;
  69.   // 当前元素的前一个兄弟节点:previousElementSibling;
  70.   let prevEle = currentImg.parentElement.previousElementSibling;
  71.   // console.log(prevEle);
  72.   // 当前元素的下一个兄弟节点:nextElementSibling;
  73.   let nextEle = currentImg.parentElement.nextElementSibling;
  74.   // console.log(nextEle);
  75.   // 第一张图片, firstElementChild第一个子元素
  76.   let firstImg = parentEle.firstElementChild.firstElementChild;
  77.   // 最后一张图片, firstElementChild, 最后一个子元素
  78.   let lastImg = parentEle.lastElementChild.firstElementChild;
  79.   // console.log(lastImg);
  81.   let activeImg = currentImg;
  82.   // console.log(activeImg);
  83.   // 向前翻页
  84.   if (ev.target.classList.contains("prev")) {
  85.     // console.log(ev.target.classList.contains("prev"));
  86.     // 如果存在前一张图片,就使用它,否则就使用最后一张图片来更新它,形成循环显示的效果
  87.     let activeImg = prevEle !== null ? prevEle.firstElementChild : lastImg;
  88.     // 使用激活元素来同步更新图片与按钮
  89.     // console.log(activeImg.dataset.index);
  90.     setActiveEle(activeImg.dataset.index);
  91.   }
  92.   // 向后翻页
  93.   if (ev.target.classList.contains("next")) {
  94.     // 如果不存在下一张图片,就用第一张图片更新它
  95.     let activeImg = nextEle !== null ? nextEle.firstElementChild : firstImg;
  96.     setActiveEle(activeImg.dataset.index);
  97.   }
  98. }
  100. // 让图片每隔2秒进行自动播放（使用定时器，事件自动派发）
  101. // 单独写一个事件监听器,为后面的事件自动派发做准备
  102. skip.children[1].addEventListener("load", skipImg, false);
  103. let timer = null;
  104. const slider = document.querySelector(".container");
  105. slider.addEventListener("mouseout", startTimer, false);
  106. window.addEventListener("load", startTimer);
  107. slider.addEventListener("mouseover", clearTimer, false);
  109. // 启动定时器
  110. function startTimer() {
  111.   // 创建自定义事件对象
  112.   const clickEvent = new Event("load");
  113.   timer = setInterval(() => skip.children[1].dispatchEvent(clickEvent), 2000);
  114. }
  116. // 清除定时器
  118. function clearTimer() {
  119.   clearInterval(timer);
  120. }

注意：在事件派发准备这块儿时，不要定义前边已经在当前 DOM 元素上定义过的事件，否则在进行事件触发时，会一次性触发两次，在这里的让轮播图动起来，是使用定时器来操作的。

显示效果：

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！