search

博客列表 >JavaScript 评论，延时加载图片，轮播图，选项卡

JavaScript 评论，延时加载图片，轮播图，选项卡

王娇
王娇原创
2020年05月28日 18:08:29558浏览

学习总结

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

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页面效果

上一条：2020-05-28——ES6 let与const及其相关下一条：前段学习：第19章 jQuery基础与操作结果处理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多