简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端 - JS - 实战案例
Blogger Information
Blog 33
fans 0
comment 0
visits 27661
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
868 people have browsed it

前端 - JS - 实战案例

一、选项卡

  • 原理：
  1. 1.使用css样式来进行激活导航栏、显示列表样式
  2. 2.使用html data-*属性建立每一个导航栏与每一个显示列表相同的索引，每当点击导航栏时就会激活相同索引的显示列表
  3. 3.对导航栏使用事件委托
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .box {
  14.         width: 300px;
  15.         height: 340px;
  16.       }
  17.       .nav-box {
  18.         height: 40px;
  19.         background-color: lightsalmon;
  20.       }
  21.       .nav-box ul {
  22.         list-style: none;
  23.         display: flex;
  24.         justify-content: space-between;
  25.       }
  26.       .nav-box ul li {
  27.         width: 75px;
  28.         height: 40px;
  29.         display: flex;
  30.         align-items: center;
  31.         justify-content: center;
  32.       }
  33.       .list-box {
  34.         height: 300px;
  35.         background-color: lightcoral;
  36.       }
  37.       /*导航栏的激活样式*/
  38.       .u01 .active {
  39.         background-color: yellow;
  40.       }
  41.       /*显示区块默认都是隐藏的*/
  42.       .d {
  43.         display: none;
  44.       }
  45.       /*显示区块的激活样式*/
  46.       .list-box .d.active {
  47.         display: block;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="box">
  53.       <div class="nav-box">
  54.         <ul class="u01">
  55.           <!--第一个导航列表默认是激活的-->
  56.           <li class="active" data-index="1">家具</li>
  57.           <li data-index="2">家电</li>
  58.           <li data-index="3">电脑</li>
  59.           <li data-index="4">手机</li>
  60.         </ul>
  61.       </div>
  62.       <div class="list-box">
  63.         <!--第一个显示区块默认是激活的-->
  64.         <div class="d active" data-index="1">家具内容</div>
  65.         <div class="d" data-index="2">家电内容</div>
  66.         <div class="d" data-index="3">电脑内容</div>
  67.         <div class="d" data-index="4">手机内容</div>
  68.       </div>
  69.     </div>
  70.   </body>
  71.   <script>
  72.     // 1. 获取导航栏：利用事件委托触发子节点的onclick事件
  73.     var u01 = document.getElementsByClassName("u01")[0];
  75.     // 2. 获取显示区块
  76.     var div = document.getElementsByClassName("d");
  78.     // 3. 给导航栏添加click事件：每当点击导航栏中的每一个列表项时显示对应的区块
  79.     u01.addEventListener("click", show, false);
  81.     // 4. 给导航栏添加mouseover事件：每当点击导航栏中的每一个列表项时显示对应的区块
  82.     u01.addEventListener("mouseover", show, false);
  84.     //事件回调函数
  85.     function show(ev) {
  86.       // 1. 每当点击时先清空导航栏原有激活样式
  87.       Array.from(ev.target.parentNode.children).forEach(function (item) {
  88.         item.classList.remove("active");
  89.       });
  90.       // 2. 再对点击的节点激活样式
  91.       ev.target.classList.toggle("active");
  92.       // 3. 导航栏之后再清空显示区块的原有激活样式
  93.       Array.from(div).forEach(function (item) {
  94.         item.classList.remove("active");
  95.       });
  96.       // 4. 在显示区块中查询data-index与导航栏的data-index相等的内容，将它设置为激活
  97.       Array.from(div).forEach(function (item) {
  98.         if (item.dataset.index === ev.target.dataset.index) {
  99.           item.classList.add("active");
  100.         }
  101.       });
  102.     }
  103.   </script>
  104. </html>

二、轮播图

  • 原理：
  1. 1.原点随图片数量动态生成
  2. 2.使用css样式来进行激活原点、显示对应图片样式
  3. 3.使用html data-*属性建立每一个原点与每一个显示图片相同的索引，每当点击原点时就会激活相同索引的显示图片
  4. 4.使用事件委托机制为每一个小圆点添加点击事件
  5. 5.翻页按钮利用触发激活原点进行翻页的机制
  6. 6.使用定时器实现移入移出轮播图区域暂停和继续翻页效果
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  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.       /*父容器属性*/
  9.       .car-box {
  10.         position: relative;
  11.         margin: 0 auto;
  12.         width: 1000px;
  13.         height: 350px;
  14.       }
  15.       .car-box .slider {
  16.         width: 1000px;
  17.         height: 350px;
  18.         display: none;
  19.       }
  20.       .car-box .slider.active {
  21.         display: block;
  22.       }
  23.       /*原点列表样式*/
  24.       .car-box .point-list {
  25.         position: absolute;
  26.         left: 50%;
  27.         margin-left: -38px;
  28.         top: 310px;
  29.       }
  30.       .car-box .point-list .point {
  31.         display: inline-block;
  32.         width: 12px;
  33.         height: 12px;
  34.         margin: 0 5px;
  35.         background-color: white;
  36.         border-radius: 100%;
  37.       }
  38.       .car-box .point-list .point:hover {
  39.         cursor: pointer;
  40.       }
  41.       .car-box .point-list .point.active {
  42.         background-color: black;
  43.       }
  44.       /*跳转按钮样式*/
  45.       .skip {
  46.         position: absolute;
  47.         top: 140px;
  48.         display: inline-block;
  49.         width: 40px;
  50.         height: 80px;
  51.         text-align: center;
  52.         line-height: 80px;
  53.         background-color: lightgray;
  54.         color: white;
  55.         opacity: 0.2;
  56.         font-size: 36px;
  57.       }
  58.       .car-box .prev {
  59.         left: 0;
  60.       }
  62.       .car-box .next {
  63.         right: 0;
  64.       }
  66.       .car-box .skip:hover {
  67.         cursor: pointer;
  68.         opacity: 0.5;
  69.         color: black;
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <div class="car-box">
  75.       <!--图片-->
  76.       <img
  77.         src="./images/banner1.jpg"
  78.         alt=""
  79.         class="slider active"
  80.         data-index="1"
  81.       />
  82.       <img src="./images/banner2.jpg" alt="" class="slider" data-index="2" />
  83.       <img src="./images/banner3.jpg" alt="" class="slider" data-index="3" />
  84.       <img src="./images/banner4.jpg" alt="" class="slider" data-index="4" />
  85.       <!--原点列表-->
  86.       <div class="point-list">
  87.         <!--应该随图片数量动态生成
  88.         <span class="point active" data-index="1"></span>
  89.         <span class="point" data-index="2"></span>
  90.         <span class="point" data-index="3"></span>
  91.         <span class="point" data-index="4"></span>-->
  92.       </div>
  93.       <!--跳转按钮-->
  94.       <span class="skip prev">&lt;</span>
  95.       <span class="skip next">&gt;</span>
  96.     </div>
  97.   </body>
  98.   <script>
  99.     //获取图片
  100.     var imgs = document.querySelectorAll(".slider");
  102.     //获取原点列表
  103.     var plist = document.querySelector(".point-list");
  105.     //动态生成原点
  106.     imgs.forEach(function (item, index) {
  107.       var span = document.createElement("span");
  108.       span.classList.add("point");
  109.       //第一个默认是激活样式
  110.       if (index === 0) {
  111.         span.classList.add("active");
  112.       }
  113.       //添加索引，和图片索引进行关联
  114.       span.dataset.index = item.dataset.index;
  115.       plist.appendChild(span);
  116.     });
  117.     //获取所有小圆点
  118.     var point = document.querySelectorAll(".point");
  120.     //使用事件委托为每一个小圆点添加点击事件
  121.     plist.addEventListener(
  122.       "click",
  123.       function (ev) {
  124.         //如果点击的小圆点的索引值和图片的索引值一样则激活样式
  125.         imgs.forEach(function (item) {
  126.           if (item.dataset.index === ev.target.dataset.index) {
  127.             //清除图片原有激活样式
  128.             imgs.forEach(function (item) {
  129.               item.classList.remove("active");
  130.             });
  131.             //设置图片激活
  132.             item.classList.add("active");
  133.             //清除小圆点原有激活样式和设置小圆点激活
  134.             setPorintActive(item.dataset.index);
  135.           }
  136.         });
  137.       },
  138.       false
  139.     );
  140.     //公共函数：设置小圆点激活
  141.     function setPorintActive(imgIndex) {
  142.       //清除小圆点原有激活样式
  143.       point.forEach(function (item) {
  144.         item.classList.remove("active");
  145.       });
  146.       //设置小圆点激活
  147.       point.forEach(function (item) {
  148.         if (item.dataset.index === imgIndex) {
  149.           item.classList.add("active");
  150.         }
  151.       });
  152.     }
  153.     //获取翻页按钮
  154.     var skips = document.querySelectorAll(".skip");
  155.     //给翻页按钮添加点击事件
  156.     skips.item(0).addEventListener("click", skipImg, false);
  157.     skips.item(1).addEventListener("click", skipImg, false);
  158.     //翻页函数
  159.     function skipImg(ev) {
  160.       // 1. 找到当前正在显示的图片
  161.       var currentImg = null;
  162.       imgs.forEach(function (img) {
  163.         if (img.classList.contains("active")) {
  164.           currentImg = img;
  165.         }
  166.       });
  167.       // 2. 判断是否点击了前一页
  168.       if (ev.target.classList.contains("prev")) {
  169.         // 1. 先清空当前图片的激活样式
  170.         currentImg.classList.remove("active");
  171.         // 2. 再把当前页设置为前一页
  172.         currentImg = currentImg.previousElementSibling;
  173.         // 3. 把当前页激活，为防止越界，先判断前一页存不存在
  174.         if (currentImg !== null && currentImg.nodeName === "IMG") {
  175.           //存在则激活
  176.           currentImg.classList.add("active");
  177.         } else {
  178.           //不存在则直接跳转到最后一页
  179.           currentImg = imgs[imgs.length - 1];
  180.           currentImg.classList.add("active");
  181.         }
  182.       }
  183.       // 3. 判断是否点击了后一页
  184.       if (ev.target.classList.contains("next")) {
  185.         // 1. 先清空当前图片的激活样式
  186.         currentImg.classList.remove("active");
  187.         // 2. 再把当前页设置为后一页
  188.         currentImg = currentImg.nextElementSibling;
  189.         // 3. 把当前页激活，为防止越界，先判断后一页存不存在
  190.         if (currentImg !== null && currentImg.nodeName === "IMG") {
  191.           //存在则激活
  192.           currentImg.classList.add("active");
  193.         } else {
  194.           //不存在则直接跳转到第一页
  195.           currentImg = imgs[0];
  196.           currentImg.classList.add("active");
  197.         }
  198.       }
  199.       // 4. 关联小圆点高亮
  200.       setPorintActive(currentImg.dataset.index);
  201.     }
  202.     //获取轮播图容器
  203.     var box = document.querySelector(".car-box");
  204.     //定义一个定时器，用来清空定时器
  205.     var timer = null;
  206.     // 1. 当鼠标移出轮播图区域时，启动定时器
  207.     box.addEventListener("mouseout", startTimer, false);
  208.     // 2. 当鼠标移入轮播图区域时，清空定时器
  209.     box.addEventListener("mouseover", clearTimer, false);
  210.     //启动定时器函数
  211.     function startTimer() {
  212.       //定义一个点击事件
  213.       var click = new Event("click");
  214.       //间歇式执行，间隔为2秒
  215.       setInterval(function () {
  216.         //使用事件派发向翻页按钮派发点击事件，触发翻页函数
  217.         skips.item(1).dispatchEvent(click);
  218.       }, 2000);
  219.     }
  220.     //清除定时器函数
  221.     function clearTimer() {
  222.       clearInterval(timer);
  223.     }
  224.   </script>
  225. </html>

四、课程总结

  • 今天进行了 JavaScript 的实战，通过上课认真听讲和认真完成老师布置的作业，使得我对 js经典案例比如选项卡和轮播图 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了操作DOM和事件处理的特点以及基本用法。
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！