Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript 评论，延时加载图片，轮播图，选项卡
Blogger Information
Blog 64
fans 6
comment 2
visits 82993
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
JavaScript 评论，延时加载图片，轮播图，选项卡
王娇
Original
559 people have browsed it

学习总结

  • 冒泡方法加载事件时，要注意当前是哪个元素触发的事件
  • 事件委托可以模拟用户操作，提高代码复用

1.1首页index.php

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>javaScript 轮播图 选项卡 懒加载</title>
  9.     <link rel="stylesheet" href="css/index.css">
  10. </head>
  12. <body>
  13.     <div class="box">
  14.         <div class="bannerBox">
  15.             <img src="images/banner/banner1.jpg" alt="" data-index='1' class="slider active">
  16.             <img src="images/banner/banner2.jpg" alt="" data-index='2' class="slider">
  17.             <img src="images/banner/banner3.jpg" alt="" data-index='3' class="slider">
  18.             <img src="images/banner/banner4.jpg" alt="" data-index='4' class="slider">
  19.             <div class="pointList">
  20.                 <!-- 图片对应的小圆点应该按照图片的个数动态生成 -->
  21.                 <!-- <span class="point active"></span>
  22.                 <span class="point"></span>
  23.                 <span class="point"></span>
  24.                 <span class="point"></span> -->
  25.             </div>
  26.             <span class="skip prev">&lt;</span>
  27.             <span class="skip next">&gt;</span>
  28.         </div>
  30.         <!-- 轮播图的js代码 -->
  31.         <script src="js/banner.js"></script>
  33.         <!-- 选项卡和图片延时加载 -->
  34.         <div class="main">
  35.             <!-- 选项卡 -->
  36.             <div class="tabCard">
  37.                 <div class="tab">
  38.                     <div class="active" data-food-index="1">凉菜</div>
  39.                     <div data-food-index="2">热菜</div>
  40.                     <div data-food-index="3">甜品</div>
  41.                     <div data-food-index="4">酒水</div>
  42.                 </div>
  43.                 <div class="item active" data-food-index="1">
  44.                     <div>五香酱牛肉</div>
  45.                     <div>凉拌笋丝</div>
  46.                     <div>果仁菠菜</div>
  47.                     <div>大拌菜</div>
  48.                 </div>
  49.                 <div class="item" data-food-index="2">
  50.                     <div>宫爆鸡丁</div>
  51.                     <div>鱼香肉丝</div>
  52.                     <div>锅包肉</div>
  53.                     <div>木须肉</div>
  54.                 </div>
  55.                 <div class="item" data-food-index="3">
  56.                     <div>蛋糕</div>
  57.                     <div>冰淇淋</div>
  58.                     <div>蛋挞</div>
  59.                     <div>饼干</div>
  60.                 </div>
  61.                 <div class="item" data-food-index="4">
  62.                     <div>橙汁</div>
  63.                     <div>啤酒</div>
  64.                     <div>二锅头</div>
  65.                     <div>雪碧</div>
  66.                 </div>
  67.             </div>
  69.             <!-- 选项卡的js代码 -->
  70.             <script src="js/tabCard.js"></script>
  72.             <!-- 图片延时加载 -->
  73.             <div class="imgBox" onscroll="">
  74.                 <?php for($i=1;$i<=70;$i++):?>
  75.                 <img src="images/lazoyLoad/temp.jpg" alt="" data-src="<?php echo 'images/lazoyLoad/img-'.$i.'.jpg'; ?>">
  76.                 <?php endfor;?>
  77.             </div>
  78.             <!-- 图片延时加载js代码 -->
  79.             <script src="js/lazyLoad.js"></script>
  80.         </div>
  82.         <!-- 评论区 -->
  83.         <div class="commentBox">
  84.             <textarea name="" id="" cols="165" rows="10" placeholder="输入评论"></textarea>
  85.             <button>发表评论</button>
  86.             <div class="comm">
  87.                 <!-- <div class="item">
  88.                     <span>写的好棒</span>
  89.                     <button>删除</button>
  90.                 </div>
  91.                 <div class="item">
  92.                     <span>写的好棒</span>
  93.                     <button>删除</button>
  94.                 </div>
  95.                 <div class="item">
  96.                     <span>写的好棒</span>
  97.                     <button>删除</button>
  98.                 </div> -->
  99.             </div>
  100.         </div>
  102.         <script src="js/comment.js"></script>
  104.     </div>
  106. </body>
  110. </html>

1.2首页样式

  2. * {
  3.   padding: 0px;
  4.   margin: 0px;
  5.   box-sizing: border-box;
  6.   font-size: 12px;
  7. }
  9. .box {
  10.   width: 1020px;
  11.   min-height: 600px;
  12.   margin-top: 5px;
  13.   margin-left: auto;
  14.   margin-right: auto;
  15. }
  16. /* 轮播图 */
  17. .box > .bannerBox {
  18.   /* 轮播图相对定位，为了定位其中的上一张，下一张和图片圆点的位置 */
  19.   position: relative;
  20.   width: 100%;
  21.   height: 350px;
  22. }
  24. /* 轮播图图片 */
  25. .box > .bannerBox > .slider {
  26.   width: 100%;
  27.   height: 350px;
  28.   display: none;
  29. }
  30. .box > .bannerBox > .slider.active {
  31.   display: block;
  32. }
  33. /* 轮播图上图片对应的圆点 */
  34. .box > .bannerBox > .pointList {
  35.   position: absolute;
  36.   left: 50%;
  37.   top: 330px;
  38. }
  39. .box > .bannerBox > .pointList .point {
  40.   display: inline-block;
  41.   width: 12px;
  42.   height: 12px;
  43.   border-radius: 100%;
  44.   margin: 0px 5px;
  45.   background-color: white;
  46. }
  47. .box > .bannerBox > .pointList .point.active {
  48.   background-color: black;
  49. }
  50. .box > .bannerBox > .pointList .point:hover {
  51.   cursor: pointer;
  52. }
  53. /* 轮播图上一张和下一张切换的按钮 */
  54. .box > .bannerBox > .skip {
  55.   display: inline-block;
  56.   position: absolute;
  57.   background-color: #ccc;
  58.   color: white;
  59.   opacity: 0.2;
  60.   top: 140px;
  61.   width: 40px;
  62.   height: 70px;
  63.   line-height: 70px;
  64.   text-align: center;
  65.   font-size: 4rem;
  66. }
  67. .box > .bannerBox > .skip.prev {
  68.   left: 0px;
  69. }
  70. .box > .bannerBox > .skip.next {
  71.   right: 0px;
  72. }
  73. .box > .bannerBox > .skip:hover {
  74.   cursor: pointer;
  75.   opacity: 0.5;
  76.   color: black;
  77. }
  79. /* 选项卡 */
  80. .tabCard {
  81.   margin-top: 10px;
  82.   border: 1px solid #ccc;
  83.   border-radius: 5px;
  84.   width: 400px;
  85.   height: 300px;
  86.   text-align: center;
  87. }
  89. /* 选项卡和图片懒加载 */
  90. .main {
  91.   display: flex;
  92.   flex-flow: row nowrap;
  93. }
  95. /* 选项卡头部 */
  96. .tabCard > .tab {
  97.   display: flex;
  98.   flex-flow: row nowrap;
  99. }
  101. .tabCard > .tab > div:hover {
  102.   cursor: pointer;
  103. }
  104. .tabCard > .tab > div {
  105.   background-color: white;
  106.   border: 1px solid #ccc;
  107.   border-radius: 5px;
  108.   margin: 3px 3px;
  109.   padding: 5px 0px;
  110.   width: 95px;
  111.   height: 37px;
  112.   font-size: 1.5rem;
  113.   font-weight: bolder;
  114. }
  115. .tabCard > .tab > div.active {
  116.   background-color: #313c46;
  117.   color: white;
  118. }
  120. /* 选项卡内容 */
  121. .tabCard > .item {
  122.   text-align: left;
  123.   display: none;
  124. }
  126. .tabCard > .item > div {
  127.   margin-left: 10px;
  128.   margin-top: 10px;
  129.   font-size: 1.4rem;
  130. }
  131. .tabCard > .item.active {
  132.   display: block;
  133. }
  135. /* 图片延时加载 */
  136. .main > .imgBox {
  137.   height: 300px;
  138.   /* 添加滚动条 */
  139.   overflow: auto;
  140.   display: grid;
  141.   gap: 10px;
  142.   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  143. }
  144. .main > .imgBox > img {
  145.   width: 100%;
  146. }
  148. /* 评论区 */
  149. .commentBox {
  150.   min-height: 300px;
  151.   margin-bottom: 20px;
  152.   margin-top: 10px;
  153. }
  155. .commentBox > .comm {
  156.   margin-top: 10px;
  157.   display: flex;
  158.   flex-flow: column nowrap;
  159.   justify-content: space-evenly;
  160.   align-items: center;
  161. }
  163. .commentBox > .comm > .item {
  164.   width: 100%;
  165.   margin: 5px 0px;
  166.   height: 50px;
  167.   border: 1px solid #ccc;
  168.   display: flex;
  169.   flex-flow: row nowrap;
  170.   justify-content: space-between;
  171.   align-items: center;
  172. }
  174. .commentBox > .comm > .item > button {
  175.   height: 30px;
  176.   width: 100px;
  177. }

2.1轮播图js代码bannre.js

  2. var imgs = document.querySelectorAll("img");
  3. var pointList = document.querySelector(".pointList");
  5. //动态给每张图片生成一个小圆点
  6. imgs.forEach(function (img, index) {
  7.   var span = document.createElement("span");
  9.   //默认显示的是第一张图片
  10.   if (index === 0) {
  11.     //   classList对象是给标签添加类样式
  12.     span.classList.add("point", "active");
  13.   }
  14.   span.classList.add("point");
  16.   //   dataset对象给标签添加“data-变量名”属性，访问“标签.dataset.变量名”
  17.   span.dataset.index = img.dataset.index;
  19.   pointList.appendChild(span);
  20. });
  22. //获取所有的小圆点
  23. var points = document.querySelectorAll(".point");
  24. // 为每一个小圆点添加click事件，使用事件冒泡，只需要给它们的父元素添加click事件即可
  25. //addEventListener添加事件监听，第一个参数是事件名称，第2个参数是回调函数，第3个参数是false是冒泡方式
  26. pointList.addEventListener(
  27.   "click",
  28.   function (ev) {
  29.     //ev.target是当前哪个元素发生了click事件，console.log(ev.target);
  30.     //ev.currentTarget当前监听的是哪个元素，是div class='pointList'
  31.     currentSpan = ev.target;
  32.     //判断是不是点击在小圆点之外的pointList的地方，如果点的不是小圆点，则不改变属性样式
  33.     if (currentSpan !== ev.currentTarget) {
  34.       imgs.forEach(function (img) {
  35.         //1.每个图片的active类样式先清除
  36.         img.classList.remove("active");
  37.         //2.如果当前图片的data-index属性与点击的小圆点的data-index属性相同，则给图片添加active类属性
  38.         if (img.dataset.index === currentSpan.dataset.index) {
  39.           img.classList.add("active");
  40.           setPointActive(currentSpan);
  41.         }
  42.       });
  43.     }
  44.   },
  45.   false
  46. );
  48. //设置当前被点击的小圆点为高亮
  49. function setPointActive(ele) {
  50.   points.forEach(function (point) {
  51.     //先清除所有小圆点的高亮，也就是active属性
  52.     point.classList.remove("active");
  53.     //如果当前小圆点的index值===被点击的小圆点的index值，则当前小圆点设置为高亮，也就是添加active属性
  54.     if (point.dataset.index === ele.dataset.index) {
  55.       point.classList.add("active");
  56.     }
  57.   });
  58. }
  60. //获取左，右的翻页按钮
  61. var skip = document.querySelectorAll(".skip");
  63. //添加点击事件
  64. skip.item(0).addEventListener("click", skipImg, false);
  65. skip.item(1).addEventListener("click", skipImg, false);
  67. function skipImg(ev) {
  68.   //获取当前显示的图片
  69.   var currentImg = null;
  70.   //获取当前点击的是哪个按钮，是前一页，还是下一页
  71.   var currentSkip = ev.target;
  73.   imgs.forEach(function (img) {
  74.     //如果当前图片有类属性active,就是当前显示的图片，获取这张图片
  75.     if (img.classList.contains("active")) {
  76.       currentImg = img;
  77.     }
  78.   });
  80.   //当点击前一页按钮
  81.   if (currentSkip.classList.contains("prev")) {
  82.     //清除当前图片的active样式
  83.     currentImg.classList.remove("active");
  84.     //previousElementSibling获取当前元素的上一个元素，也就是获取上张图片，然后设置active样式
  85.     currentImg = currentImg.previousElementSibling;
  86.     //如果上一张图片不存在，则设置当前图片为最后一张图片，形成一个循环
  87.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  88.       currentImg.classList.add("active");
  89.     } else {
  90.       currentImg = imgs.item(imgs.length - 1);
  91.       currentImg.classList.add("active");
  92.     }
  93.     setPointActive(currentImg);
  94.   }
  96.   //当点击下一页按钮
  97.   if (currentSkip.classList.contains("next")) {
  98.     //清除当前图片的active样式
  99.     currentImg.classList.remove("active");
  100.     //nextElementSibling获取当前元素的下一个元素，也就是获取下一张图片，然后设置active样式
  101.     currentImg = currentImg.nextElementSibling;
  102.     //如果下一张图片不存在，则设置当前图片为第一张图片，形成一个循环
  103.     if (currentImg !== null && currentImg.nodeName === "IMG") {
  104.       currentImg.classList.add("active");
  105.     } else {
  106.       currentImg = imgs.item(0);
  107.       currentImg.classList.add("active");
  108.     }
  109.     setPointActive(currentImg);
  110.   }
  111. }
  113. //先获取整个轮播图
  114. var bannerBox = document.querySelector(".bannerBox");
  115. //设置一个定时器
  116. var timer = null;
  117. //当鼠标移出轮播时，设置定时器，每2秒做一个事件派发，模拟点击下一页按钮
  118. bannerBox.addEventListener("mouseout", timerStart, false);
  119. //当鼠标移入轮播时，清除定时器
  120. bannerBox.addEventListener("mouseover", timerEnd, false);
  122. function timerStart() {
  123.   var click = new Event("click");
  125.   //setInterval设置定时器，每2秒点击一下下一页按钮
  126.   timer = setInterval(function () {
  127.     //给下一页按钮做一个事件派发，就是模拟点击一页按钮
  128.     skip.item(1).dispatchEvent(click);
  129.   }, 2000);
  130. }
  132. //clearInterval(),清除定时器
  133. function timerEnd() {
  134.   clearInterval(timer);
  135. }
  136. //当页面第一次加载时，启动定时器
  137. timerStart();

2.2评论区js代码comment.js

  2. var commBtn = document.querySelector(".commentBox>button");
  4. var commText = document.querySelector(".commentBox>textarea");
  6. var comm = document.querySelector(".commentBox>.comm");
  8. commBtn.addEventListener(
  9.   "click",
  10.   function () {
  11.     var textValue = commText.value; //评论内容
  12.     var div = document.createElement("div");
  13.     div.classList.add("item");
  15.     var span = document.createElement("span");
  16.     span.innerText = textValue;
  18.     var btn = document.createElement("button");
  19.     btn.innerText = "删除";
  20.     btn.addEventListener(
  21.       "click",
  22.       function (ev) {
  23.         if (confirm("是否删除该评论？")) {
  24.           ev.target.parentNode.parentNode.removeChild(ev.target.parentNode);
  25.         }
  26.       },
  27.       false
  28.     );
  30.     div.appendChild(span);
  31.     div.appendChild(btn);
  33.     if (comm.childElementCount === 0) {
  34.       comm.appendChild(div);
  35.     } else {
  36.       comm.insertBefore(div, comm.firstElementChild);
  37.     }
  39.     commText.value = "";
  40.   },
  41.   false
  42. );

2.3延时加载js代码lazyLoad.js

  2. //获取图片容器imgbox
  3. var imgBox = document.querySelector(".imgBox");
  4. //获取所有图片
  5. var boxImages = document.querySelectorAll(".imgBox img");
  7. //图片所在的div的可视高度
  8. var clientHeight = imgBox.clientHeight;
  10. imgBox.addEventListener(
  11.   "scroll",
  12.   function () {
  13.     lazyLoad(boxImages, clientHeight);
  14.   },
  15.   false
  16. );
  18. function lazyLoad(boxImages, clientHeight) {
  19.   var scrollTop = imgBox.scrollTop;
  20.   boxImages.forEach(function (img) {
  21.     if (img.offsetTop <= clientHeight + scrollTop) img.src = img.dataset.src;
  22.   });
  23. }

2.4选项卡js代码tabCard.js

  2. var tabs = document.querySelector(".tab");
  4. var items = document.querySelectorAll(".item");
  6. tabs.addEventListener("click", showItem, false);
  8. function showItem(ev) {
  9.   //点击的是选项卡图标，显示切换
  10.   var currentTab = ev.target;
  12.   if (ev.target !== ev.currentTarget) {
  13.     //遍历tabs的子结点，就是每个tab选项卡
  14.     tabs.childNodes.forEach(function (tab) {
  15.       //确定选择的是DIV选项卡
  16.       if (tab.nodeName === "DIV") {
  17.         //清除选项卡的active类样式
  18.         tab.classList.remove("active");
  19.       }
  20.     });
  21.     currentTab.classList.add("active");
  23.     //遍历选项卡内容的div
  24.     items.forEach(function (item) {
  25.       //先清除内容上的active的类样式
  26.       item.classList.remove("active");
  27.       //如果当前点击的选项卡的data-food-index中的内容等于内容中的data-food-index,则内容显示
  28.       if (currentTab.dataset.foodIndex === item.dataset.foodIndex) {
  29.         item.classList.add("active");
  30.       }
  31.     });
  32.   }
  33. }

3页面效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：为了便于记忆和理解 , 咱们的js代码都是精简且高效, 脚本并不是越多越好, 要注意效率
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