Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡，图片懒加载，轮播图自动播放功能-js-41课8.17
Blogger Information
Blog 59
fans 6
comment 0
visits 51754
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-41课8.17
希望
Original
1224 people have browsed it

一、选项卡

1.建demo1.html,并引入tabs.css和tabs.js

  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.       @import url(static/css/tabs.css);
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <!-- 导航区 -->
  13.     <div class="tabs">
  14.       <ul class="tab">
  15.         <!-- 给一个激活项active -->
  16.         <li class="active" data-index="1">体育</li>
  17.         <li data-index="2">教育</li>
  18.         <li data-index="3">科技</li>
  19.       </ul>
  21.       <!-- 体育详情 -->
  22.       <ul class="item active" data-index="1">
  23.         <li><a href="">足球</a></li>
  24.         <li><a href="">篮球</a></li>
  25.         <li><a href="">高尔夫</a></li>
  26.       </ul>
  28.       <!-- 教育详情 -->
  29.       <ul class="item" data-index="2">
  30.         <li><a href="">数学</a></li>
  31.         <li><a href="">语文</a></li>
  32.         <li><a href="">英语</a></li>
  33.       </ul>
  35.       <!-- 科技详情 -->
  36.       <ul class="item" data-index="3">
  37.         <li><a href="">5G</a></li>
  38.         <li><a href="">AI</a></li>
  39.         <li><a href="">Blockchain</a></li>
  40.       </ul>
  41.     </div>
  42.     <script src="static/js/tabs.js"></script>
  43.   </body>
  44. </html>

2.建static/css/tabs.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. a {
  6.   text-decoration: none;
  7.   color: rgb(10, 1, 1);
  8. }
  9. a:hover {
  10.   text-decoration: underline;
  11.   color: red;
  12. }
  13. li {
  14.   list-style: none;
  15. }
  16. li:hover {
  17.   cursor: default;
  18. }
  19. .tabs {
  20.   width: 300px;
  21.   height: 200px;
  22.   margin: 30px;
  23.   background-color: rgb(245, 240, 240);
  25.   display: flex;
  26.   flex-direction: column;
  27. }
  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: rgb(228, 226, 226);
  38. }
  40. .tab li.active {
  41.   background-color: rgb(248, 223, 140);
  42. }
  44. /* 默认所有选项卡只有一个显示,其它隐藏 */
  45. .item {
  46.   padding: 20px;
  47.   display: none;
  48. }
  49. .item.active {
  50.   display: block;
  51. }

3.建static/js/tabs.js

  1. // 1. 获取导航
  2. var tab = document.querySelector(".tab");
  3. // console.log(tab);
  4. // 2. 获取详情页,共3个，拿到全部
  5. var items = document.querySelectorAll(".item");
  6. // console.log(items);
  7. // 3. 给导航添加点击事件(事件代理/事件委托/冒泡)
  8. tab.addEventListener("click", show, false);
  9. tab.addEventListener("mouseover", show, false);
  10. // 4. 声明show()函数
  11. function show(ev) {
  12.   // ev: 事件对象
  13.   // ev.type: 事件类型,如click,mouseover,input....
  14.   //   console.log(ev.type);
  15.   // ev.target: 事件的触发者
  16.   //   console.log(ev.target);
  17.   // ev.currentTarget: 事件绑定者
  18.   //   console.log(ev.currentTarget);
  20.   // 1. 清除除当前高亮选项卡之外的选项卡的高亮样式
  21.   //   console.log(ev.currentTarget.children);
  22.   ev.currentTarget.childNodes.forEach(function (item) {
  23.     if (item.nodeType === 1) item.classList.remove("active");
  24.   });
  26.   // 2. 应该将用户点击的当前选项卡高亮显示
  27.   ev.target.classList.add("active");
  29.   // 3. 清空原有列表
  30.   items.forEach(function (item) {
  31.     item.classList.remove("active");
  32.   });
  34.   // 4. 将选项卡对应的内容进行切换(根据导航和详情中的data-index)
  35.   items.forEach(function (item) {
  36.     // console.log(item);
  37.     // console.log(ev.target.dataset.index, item.dataset.index);
  38.     if (ev.target.dataset.index === item.dataset.index) {
  39.       item.classList.add("active");
  40.     }
  41.   });
  42. }

二、图片懒加载

1.建demo3.html，引入lazy-base.css

  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.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  11.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  12.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  13.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  14.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  15.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  16.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  17.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  18.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  19.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  20.       <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
  21.       <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
  22.     </div>
  24.     <script>
  25.       // 1. 获取所有的图片
  26.       var imgs = document.querySelectorAll(".container img");
  28.       // 2. 获取文档的高度
  29.       var clientHeight = document.documentElement.clientHeight;
  31.       // 3. 监听滚动事件
  32.       window.addEventListener(
  33.         "scroll",
  34.         function () {
  35.           lazyload(imgs, clientHeight);
  36.         },
  37.         false
  38.       );
  40.       // 4. 懒加载函数
  41.       function lazyload(imgs, clientHeight) {
  42.         // 获取文档的滚动大小
  43.         var scrollTop = document.documentElement.scrollTop;
  45.         // 遍历图片,判断是否进入到可视区
  46.         imgs.forEach(function (img) {
  47.           if (img.offsetTop <= clientHeight + scrollTop) {
  48.             img.src = img.dataset.src;
  49.           }
  50.         });
  51.       }
  52.     </script>
  53.   </body>
  54. </html>

2.根目录下建img文件，放入很多图片

3.建static/css/lazy-base.css

  1. .parent {
  2.   height: 400px;
  3.   width: 300px;
  4.   padding: 5px;
  5.   background-color: rgb(166, 224, 194);
  6.   border: 5px solid;
  7.   overflow: scroll;
  9.   position: relative;
  10. }
  11. .parent .child {
  12.   height: 500px;
  13.   width: 400px;
  14.   padding: 5px;
  15.   background-color: rgb(241, 247, 194);
  16.   background-clip: content-box;
  17.   border: 5px solid;
  19.   position: relative;
  20.   left: 10px;
  21.   top: 20px;
  22. }

三、轮播图自动播放功能，鼠标移出时, 2秒后自动播放，鼠标移入时自动停止播放

1.在根目录下建banner文件夹，里面放入4张图片

2.建demo4.html,并引入banner图片，slider.css和slider.js

  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="static/css/slider.css" />
  8.   </head>
  9.   <body>
  10.     <div class="box">
  11.       <img
  12.         src="banner/banner1.jpg"
  13.         alt=""
  14.         data-index="1"
  15.         class="slider active"
  16.       />
  17.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  18.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  19.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  21.       <div class="point-list">
  22.         <!-- <span class="point active" data-index="1"></span>
  23.         <span class="point" data-index="2"></span>
  24.         <span class="point" data-index="3"></span> -->
  25.       </div>
  27.       <span class="skip prev">&lt;</span>
  28.       <span class="skip next">&gt;</span>
  29.     </div>
  30.     <script src="static/js/slider.js"></script>
  31.   </body>
  32. </html>

3.建static/css/slider.css

  1. ul,
  2. li {
  3.   margin: 0;
  4.   padding: 0;
  5.   list-style: none;
  6. }
  8. .box {
  9.   /*定位父级*/
  10.   position: relative;
  11.   width: 1000px;
  12.   height: 350px;
  13.   margin: 0 auto;
  14. }
  16. .box .slider {
  17.   width: 1000px;
  18.   height: 350px;
  19.   display: none;
  20. }
  22. .box .slider.active {
  23.   display: block;
  24. }
  26. .box .point-list {
  27.   position: absolute;
  28.   /*绝对定位的环境下的水平居中方式*/
  29.   left: 50%;
  30.   margin-left: -38px;
  31.   top: 310px;
  32. }
  34. .box .point-list .point {
  35.   display: inline-block;
  36.   width: 12px;
  37.   height: 12px;
  38.   margin: 0 5px;
  39.   background-color: white;
  40.   border-radius: 100%;
  41. }
  43. .box .point-list .point.active {
  44.   background-color: black;
  45. }
  47. .box .point-list .point:hover {
  48.   cursor: pointer;
  49. }
  51. .skip {
  52.   position: absolute;
  53.   top: 140px;
  54.   display: inline-block;
  55.   width: 40px;
  56.   height: 80px;
  57.   text-align: center;
  58.   line-height: 80px;
  59.   background-color: lightgray;
  60.   color: white;
  61.   opacity: 0.2;
  62.   font-size: 36px;
  63. }
  65. .box .prev {
  66.   left: 0;
  67. }
  69. .box .next {
  70.   right: 0;
  71. }
  73. .box .skip:hover {
  74.   cursor: pointer;
  75.   opacity: 0.5;
  76.   color: black;
  77. }

4.建static/js/slider.js

  1. // 获取轮播图片
  2. var imgs = document.querySelectorAll("img");
  4. // 获取小圆点
  5. var pointList = document.querySelector(".point-list");
  7. // 动态生成小圆点
  8. imgs.forEach(function (img, index) {
  9.   var span = document.createElement("span");
  10.   //   第一个小点是激活状态，添加索引span
  11.   if (index == 0) span.classList.add("point", "active");
  12.   span.classList.add("point");
  13.   // 给当前的小圆点添加自定义data-index属性
  14.   span.dataset.index = img.dataset.index;
  15.   pointList.appendChild(span);
  16. });
  18. // 获取所有小圆点
  19. var points = document.querySelectorAll(".point");
  21. // 给小圆点添加事件(代理)
  22. pointList.addEventListener("click", function (ev) {
  23.   imgs.forEach(function (img) {
  24.     if (img.dataset.index === ev.target.dataset.index) {
  25.       imgs.forEach(function (img) {
  26.         img.classList.remove("active");
  27.       });
  28.       img.classList.add("active");
  30.       // 设置与当前图片对应的小圆点高亮显示
  31.       // 因为这个功能要多处使用,这里将它声明为公共函数
  32.       setPointActive(img.dataset.index);
  33.     }
  34.   });
  35. });
  37. // 设置与当前图片对应的小圆点高亮显示;
  38. function setPointActive(imgIndex) {
  39.   points.forEach(function (point) {
  40.     point.classList.remove("active");
  41.   });
  43.   points.forEach(function (point) {
  44.     //   添加当前相等的
  45.     if (point.dataset.index === imgIndex) point.classList.add("active");
  46.   });
  47. }
  49. // 获取翻页按钮左右
  50. var skip = document.querySelectorAll(".skip");
  52. // 添加事件
  53. skip.item(0).addEventListener("click", skipImg, false);
  54. skip.item(1).addEventListener("click", skipImg, false);
  56. // 翻页显示图片的回调方法
  57. function skipImg(ev) {
  58.   // 1. 获取当前的图片
  59.   var currentImg = null;
  60.   imgs.forEach(function (img) {
  61.     if (img.classList.contains("active")) {
  62.       currentImg = img;
  63.     }
  64.   });
  65.   //   console.log(currentImg);
  67.   // 2. 判断是否是点击了显示前一张的按钮?
  68.   if (ev.target.classList.contains("prev")) {
  69.     //   为了显示出来前一张,必须将当前图片的激活去掉
  70.     currentImg.classList.remove("active");
  71.     // 将当前图片的前一张图片设置为当前图片
  72.     currentImg = currentImg.previousElementSibling;
  73.     // console.log(currentImg);
  74.     // 如果存在前一张,再显示它,否则进入循环,显示最后一张
  75.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  76.       currentImg.classList.add("active");
  77.     } else {
  78.       currentImg = imgs[imgs.length - 1];
  79.       currentImg.classList.add("active");
  80.     }
  81.   }
  83.   // 3. 判断是否是点击了显示下一张的按钮?
  84.   if (ev.target.classList.contains("next")) {
  85.     //   为了显示出来前一张,必须将当前图片的激活去掉
  86.     currentImg.classList.remove("active");
  87.     // 将当前图片的前一张图片设置为当前图片
  88.     currentImg = currentImg.nextElementSibling;
  89.     // console.log(currentImg);
  90.     // 如果存在下一张,再显示它,否则进入循环,显示第一张
  91.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  92.       currentImg.classList.add("active");
  93.     } else {
  94.       currentImg = imgs[0];
  95.       currentImg.classList.add("active");
  96.     }
  97.   }
  98.   // 小圆点高亮
  99.   setPointActive(currentImg.dataset.index);
  100. }
  102. var div = document.querySelector(".box");
  103. var playImg;
  104. // 页面加载时自动播放
  105. window.onload = start();
  106. // 鼠标移出时: 播放
  107. div.addEventListener("mouseout", start);
  108. // 鼠标移入时: 停止
  109. div.addEventListener("mouseover", function () {
  110.   clearInterval(playImg);
  111. });
  112. function start() {
  113.   playImg = setInterval(function () {
  114.     // Event 对象代表事件的状态
  115.     var event = new Event("click");
  116.     // 派发点击事件
  117.     skip.item(1).dispatchEvent(event);
  118.   }, 2000);
  119. }
  • 总结：
  • 选项卡可以将对应内容进行切换，第一个要做激活项
  • 懒加载有左边和顶部偏移量，可视区高度是动态变化的
  • 轮播图可以点击下方小圆点阅览，也可以点击左右翻页按钮阅览
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