亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 33
粉絲 0
評論 0
訪問量 34342
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
前端 - JS - 實(shí)戰(zhàn)案例
郴
原創(chuàng)
1149人瀏覽過

前端 - JS - 實(shí)戰(zhàn)案例

一、選項(xiàng)卡

  • 原理：
  1. 1.使用css樣式來進(jìn)行激活導(dǎo)航欄、顯示列表樣式
  2. 2.使用html data-*屬性建立每一個導(dǎo)航欄與每一個顯示列表相同的索引，每當(dāng)點(diǎn)擊導(dǎo)航欄時就會激活相同索引的顯示列表
  3. 3.對導(dǎo)航欄使用事件委托
  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.       /*導(dǎo)航欄的激活樣式*/
  38.       .u01 .active {
  39.         background-color: yellow;
  40.       }
  41.       /*顯示區(qū)塊默認(rèn)都是隱藏的*/
  42.       .d {
  43.         display: none;
  44.       }
  45.       /*顯示區(qū)塊的激活樣式*/
  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.           <!--第一個導(dǎo)航列表默認(rèn)是激活的-->
  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">手機(jī)</li>
  60.         </ul>
  61.       </div>
  62.       <div class="list-box">
  63.         <!--第一個顯示區(qū)塊默認(rèn)是激活的-->
  64.         <div class="d active" data-index="1">家具內(nèi)容</div>
  65.         <div class="d" data-index="2">家電內(nèi)容</div>
  66.         <div class="d" data-index="3">電腦內(nèi)容</div>
  67.         <div class="d" data-index="4">手機(jī)內(nèi)容</div>
  68.       </div>
  69.     </div>
  70.   </body>
  71.   <script>
  72.     // 1. 獲取導(dǎo)航欄：利用事件委托觸發(fā)子節(jié)點(diǎn)的onclick事件
  73.     var u01 = document.getElementsByClassName("u01")[0];
  75.     // 2. 獲取顯示區(qū)塊
  76.     var div = document.getElementsByClassName("d");
  78.     // 3. 給導(dǎo)航欄添加click事件：每當(dāng)點(diǎn)擊導(dǎo)航欄中的每一個列表項(xiàng)時顯示對應(yīng)的區(qū)塊
  79.     u01.addEventListener("click", show, false);
  81.     // 4. 給導(dǎo)航欄添加mouseover事件：每當(dāng)點(diǎn)擊導(dǎo)航欄中的每一個列表項(xiàng)時顯示對應(yīng)的區(qū)塊
  82.     u01.addEventListener("mouseover", show, false);
  84.     //事件回調(diào)函數(shù)
  85.     function show(ev) {
  86.       // 1. 每當(dāng)點(diǎn)擊時先清空導(dǎo)航欄原有激活樣式
  87.       Array.from(ev.target.parentNode.children).forEach(function (item) {
  88.         item.classList.remove("active");
  89.       });
  90.       // 2. 再對點(diǎn)擊的節(jié)點(diǎn)激活樣式
  91.       ev.target.classList.toggle("active");
  92.       // 3. 導(dǎo)航欄之后再清空顯示區(qū)塊的原有激活樣式
  93.       Array.from(div).forEach(function (item) {
  94.         item.classList.remove("active");
  95.       });
  96.       // 4. 在顯示區(qū)塊中查詢data-index與導(dǎo)航欄的data-index相等的內(nèi)容，將它設(shè)置為激活
  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.原點(diǎn)隨圖片數(shù)量動態(tài)生成
  2. 2.使用css樣式來進(jìn)行激活原點(diǎn)、顯示對應(yīng)圖片樣式
  3. 3.使用html data-*屬性建立每一個原點(diǎn)與每一個顯示圖片相同的索引，每當(dāng)點(diǎn)擊原點(diǎn)時就會激活相同索引的顯示圖片
  4. 4.使用事件委托機(jī)制為每一個小圓點(diǎn)添加點(diǎn)擊事件
  5. 5.翻頁按鈕利用觸發(fā)激活原點(diǎn)進(jìn)行翻頁的機(jī)制
  6. 6.使用定時器實(shí)現(xiàn)移入移出輪播圖區(qū)域暫停和繼續(xù)翻頁效果
  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.       /*原點(diǎn)列表樣式*/
  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.       /*跳轉(zhuǎn)按鈕樣式*/
  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.       <!--原點(diǎn)列表-->
  86.       <div class="point-list">
  87.         <!--應(yīng)該隨圖片數(shù)量動態(tài)生成
  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.       <!--跳轉(zhuǎn)按鈕-->
  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.     //獲取原點(diǎn)列表
  103.     var plist = document.querySelector(".point-list");
  105.     //動態(tài)生成原點(diǎn)
  106.     imgs.forEach(function (item, index) {
  107.       var span = document.createElement("span");
  108.       span.classList.add("point");
  109.       //第一個默認(rèn)是激活樣式
  110.       if (index === 0) {
  111.         span.classList.add("active");
  112.       }
  113.       //添加索引，和圖片索引進(jìn)行關(guān)聯(lián)
  114.       span.dataset.index = item.dataset.index;
  115.       plist.appendChild(span);
  116.     });
  117.     //獲取所有小圓點(diǎn)
  118.     var point = document.querySelectorAll(".point");
  120.     //使用事件委托為每一個小圓點(diǎn)添加點(diǎn)擊事件
  121.     plist.addEventListener(
  122.       "click",
  123.       function (ev) {
  124.         //如果點(diǎn)擊的小圓點(diǎn)的索引值和圖片的索引值一樣則激活樣式
  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.             //設(shè)置圖片激活
  132.             item.classList.add("active");
  133.             //清除小圓點(diǎn)原有激活樣式和設(shè)置小圓點(diǎn)激活
  134.             setPorintActive(item.dataset.index);
  135.           }
  136.         });
  137.       },
  138.       false
  139.     );
  140.     //公共函數(shù)：設(shè)置小圓點(diǎn)激活
  141.     function setPorintActive(imgIndex) {
  142.       //清除小圓點(diǎn)原有激活樣式
  143.       point.forEach(function (item) {
  144.         item.classList.remove("active");
  145.       });
  146.       //設(shè)置小圓點(diǎn)激活
  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.     //給翻頁按鈕添加點(diǎn)擊事件
  156.     skips.item(0).addEventListener("click", skipImg, false);
  157.     skips.item(1).addEventListener("click", skipImg, false);
  158.     //翻頁函數(shù)
  159.     function skipImg(ev) {
  160.       // 1. 找到當(dāng)前正在顯示的圖片
  161.       var currentImg = null;
  162.       imgs.forEach(function (img) {
  163.         if (img.classList.contains("active")) {
  164.           currentImg = img;
  165.         }
  166.       });
  167.       // 2. 判斷是否點(diǎn)擊了前一頁
  168.       if (ev.target.classList.contains("prev")) {
  169.         // 1. 先清空當(dāng)前圖片的激活樣式
  170.         currentImg.classList.remove("active");
  171.         // 2. 再把當(dāng)前頁設(shè)置為前一頁
  172.         currentImg = currentImg.previousElementSibling;
  173.         // 3. 把當(dāng)前頁激活，為防止越界，先判斷前一頁存不存在
  174.         if (currentImg !== null && currentImg.nodeName === "IMG") {
  175.           //存在則激活
  176.           currentImg.classList.add("active");
  177.         } else {
  178.           //不存在則直接跳轉(zhuǎn)到最后一頁
  179.           currentImg = imgs[imgs.length - 1];
  180.           currentImg.classList.add("active");
  181.         }
  182.       }
  183.       // 3. 判斷是否點(diǎn)擊了后一頁
  184.       if (ev.target.classList.contains("next")) {
  185.         // 1. 先清空當(dāng)前圖片的激活樣式
  186.         currentImg.classList.remove("active");
  187.         // 2. 再把當(dāng)前頁設(shè)置為后一頁
  188.         currentImg = currentImg.nextElementSibling;
  189.         // 3. 把當(dāng)前頁激活，為防止越界，先判斷后一頁存不存在
  190.         if (currentImg !== null && currentImg.nodeName === "IMG") {
  191.           //存在則激活
  192.           currentImg.classList.add("active");
  193.         } else {
  194.           //不存在則直接跳轉(zhuǎn)到第一頁
  195.           currentImg = imgs[0];
  196.           currentImg.classList.add("active");
  197.         }
  198.       }
  199.       // 4. 關(guān)聯(lián)小圓點(diǎn)高亮
  200.       setPorintActive(currentImg.dataset.index);
  201.     }
  202.     //獲取輪播圖容器
  203.     var box = document.querySelector(".car-box");
  204.     //定義一個定時器，用來清空定時器
  205.     var timer = null;
  206.     // 1. 當(dāng)鼠標(biāo)移出輪播圖區(qū)域時，啟動定時器
  207.     box.addEventListener("mouseout", startTimer, false);
  208.     // 2. 當(dāng)鼠標(biāo)移入輪播圖區(qū)域時，清空定時器
  209.     box.addEventListener("mouseover", clearTimer, false);
  210.     //啟動定時器函數(shù)
  211.     function startTimer() {
  212.       //定義一個點(diǎn)擊事件
  213.       var click = new Event("click");
  214.       //間歇式執(zhí)行，間隔為2秒
  215.       setInterval(function () {
  216.         //使用事件派發(fā)向翻頁按鈕派發(fā)點(diǎn)擊事件，觸發(fā)翻頁函數(shù)
  217.         skips.item(1).dispatchEvent(click);
  218.       }, 2000);
  219.     }
  220.     //清除定時器函數(shù)
  221.     function clearTimer() {
  222.       clearInterval(timer);
  223.     }
  224.   </script>
  225. </html>

四、課程總結(jié)

  • 今天進(jìn)行了 JavaScript 的實(shí)戰(zhàn)，通過上課認(rèn)真聽講和認(rèn)真完成老師布置的作業(yè)，使得我對 js經(jīng)典案例比如選項(xiàng)卡和輪播圖 的理解和運(yùn)用更加深入和熟悉。最主要的知識點(diǎn)是明白和掌握了操作DOM和事件處理的特點(diǎn)以及基本用法。
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)