微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > JavaScript 评论，延时加载图片，轮播图，选项卡
博主信息
博文 64
粉丝 6
评论 2
访问量 102166
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript 评论，延时加载图片，轮播图，选项卡
王娇
原创
785人浏览过

学习总结

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

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：为了便于记忆和理解 , 咱们的js代码都是精简且高效, 脚本并不是越多越好, 要注意效率
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录