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

搜索
博主信息
博文 48
粉絲 0
評(píng)論 0
訪問量 44771
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
選項(xiàng)卡，懶加載和輪播圖簡單演示（0817）
丶久而舊之丶
原創(chuàng)
987人瀏覽過

JS事件操作

選項(xiàng)卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>選項(xiàng)卡案例</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: green;
  17.         }
  19.         li {
  20.             list-style-type: none;
  21.         }
  23.         .tab {
  25.             height: 36px;
  26.             display: flex;
  28.         }
  30.         .tabs {
  31.             width: 300px;
  32.             height: 300px;
  33.             margin: auto;
  34.             margin-top: 50px;
  35.             background-color: papayawhip;
  36.             display: flex;
  37.             flex-direction: column;
  38.         }
  40.         .tab li {
  41.             flex: auto;
  42.             text-align: center;
  43.             line-height: 36px;
  44.             background-color: white;
  45.         }
  47.         .tab li.active {
  48.             background-color: papayawhip;
  49.         }
  51.         .item {
  52.             padding: 20px;
  53.             display: none;
  54.         }
  56.         .item.active {
  57.             display: block;
  58.         }
  59.     </style>
  60. </head>
  62. <body>
  63.     <div class='tabs'>
  64.         <!-- 導(dǎo)航區(qū) -->
  65.         <ul class="tab">
  66.             <li class="active" data-index="1">香煙</li>
  67.             <li data-index="2">啤酒</li>
  68.             <li data-index="3">奶茶</li>
  69.         </ul>
  70.         <!-- 詳情區(qū) -->
  71.         <ul class="item active" data-index="1">
  72.             <li><a href="">中華</a></li>
  73.             <li><a href="">玉溪</a></li>
  74.             <li><a href="">芙蓉王</a></li>
  75.         </ul>
  76.         <ul class="item" data-index="2">
  77.             <li><a href="">百威</a></li>
  78.             <li><a href="">喜力</a></li>
  79.             <li><a href="">青島</a></li>
  80.         </ul>
  81.         <ul class="item" data-index="3">
  82.             <li><a href="">一點(diǎn)點(diǎn)</a></li>
  83.             <li><a href="">快樂番薯</a></li>
  84.             <li><a href="">古茗</a></li>
  85.         </ul>
  86.     </div>
  87.     <script>
  88.         var tab = document.querySelector(".tab");
  89.         var items = document.querySelectorAll(".item");
  90.         console.log(tab);
  91.         console.log(items);
  92.         tab.addEventListener("mouseover", function (ev) {
  93.             // 先消除之前active樣式
  94.             ev.currentTarget.childNodes.forEach(function (item) {
  95.                 if (item.nodeType === 1) item.classList.remove("active");
  96.             });
  97.             // 給事件觸發(fā)者添加樣式
  98.             ev.target.classList.add("active");
  100.             // 再清除詳情區(qū)樣式
  101.             items.forEach(function (item) {
  102.                 // 先清除詳情區(qū)樣式
  103.                 item.classList.remove("active");
  104.                 // 判斷自定義屬性，相等的情況下顯示詳情區(qū)
  105.                 if (ev.target.dataset.index === item.dataset.index) {
  106.                     item.classList.add("active");
  107.                 }
  108.             });
  109.             // 顯示相應(yīng)詳情區(qū)
  111.         })
  112.     </script>
  113. </body>
  115. </html>

懶加載

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>圖片懶加載</title>
  8. </head>
  10. <body>
  11.     <div class="container">
  12.         <img src="imgs/01.jpg" alt="" data-src="imgs/02.jpg">
  13.         <img src="imgs/01.jpg" alt="" data-src="imgs/03.jpg">
  14.         <img src="imgs/01.jpg" alt="" data-src="imgs/04.jpg">
  15.         <img src="imgs/01.jpg" alt="" data-src="imgs/05.jpg">
  16.         <img src="imgs/01.jpg" alt="" data-src="imgs/06.jpg">
  17.         <img src="imgs/01.jpg" alt="" data-src="imgs/07.jpg">
  18.         <img src="imgs/01.jpg" alt="" data-src="imgs/02.jpg">
  19.         <img src="imgs/01.jpg" alt="" data-src="imgs/03.jpg">
  20.         <img src="imgs/01.jpg" alt="" data-src="imgs/04.jpg">
  21.         <img src="imgs/01.jpg" alt="" data-src="imgs/05.jpg">
  22.         <img src="imgs/01.jpg" alt="" data-src="imgs/06.jpg">
  23.         <img src="imgs/01.jpg" alt="" data-src="imgs/07.jpg">
  24.         <img src="imgs/01.jpg" alt="" data-src="imgs/02.jpg">
  25.         <img src="imgs/01.jpg" alt="" data-src="imgs/03.jpg">
  26.         <img src="imgs/01.jpg" alt="" data-src="imgs/04.jpg">
  27.         <img src="imgs/01.jpg" alt="" data-src="imgs/05.jpg">
  28.         <img src="imgs/01.jpg" alt="" data-src="imgs/06.jpg">
  29.         <img src="imgs/01.jpg" alt="" data-src="imgs/07.jpg">
  30.         <img src="imgs/01.jpg" alt="" data-src="imgs/02.jpg">
  31.         <img src="imgs/01.jpg" alt="" data-src="imgs/03.jpg">
  32.         <img src="imgs/01.jpg" alt="" data-src="imgs/04.jpg">
  33.         <img src="imgs/01.jpg" alt="" data-src="imgs/05.jpg">
  34.         <img src="imgs/01.jpg" alt="" data-src="imgs/06.jpg">
  35.         <img src="imgs/01.jpg" alt="" data-src="imgs/07.jpg">
  36.         <img src="imgs/01.jpg" alt="" data-src="imgs/02.jpg">
  37.         <img src="imgs/01.jpg" alt="" data-src="imgs/03.jpg">
  38.         <img src="imgs/01.jpg" alt="" data-src="imgs/04.jpg">
  39.         <img src="imgs/01.jpg" alt="" data-src="imgs/05.jpg">
  40.         <img src="imgs/01.jpg" alt="" data-src="imgs/06.jpg">
  41.         <img src="imgs/01.jpg" alt="" data-src="imgs/07.jpg">
  42.     </div>
  43.     <script>
  44.         var imgs = document.querySelectorAll(".container>img");
  45.         window.addEventListener("scroll", function () {
  46.             // 獲取文檔高度
  47.             var clientHeight = document.documentElement.clientHeight;
  48.             // 獲取文檔的滾動(dòng)高度
  49.             var scroll = document.documentElement.scrollTop;
  50.             // console.log(imgs);
  51.             imgs.forEach(function (item) {
  52.                 if (item.offsetTop <= clientHeight + scroll) {
  53.                     item.src = item.dataset.src;
  54.                 }
  55.             });
  57.         });
  58.     </script>
  60. </body>
  62. </html>

輪播圖

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>輪播圖案例</title>
  8.     <style>
  9.         ul,
  10.         li {
  11.             margin: 0;
  12.             padding: 0;
  13.             list-style: none;
  14.         }
  16.         .box {
  17.             position: relative;
  18.             width: 800px;
  19.             height: 400px;
  20.             margin: 10px auto;
  21.             padding-top: 50px;
  22.             overflow: hidden;
  24.         }
  26.         .box .slider {
  27.             width: 800px;
  28.             height: 400px;
  29.             float: left;
  30.         }
  32.         .box .point-list {
  33.             position: absolute;
  34.             left: 50%;
  35.             margin-left: -38px;
  36.             top: 420px;
  37.         }
  39.         .box .point-list .point {
  40.             display: inline-block;
  41.             width: 12px;
  42.             height: 12px;
  43.             margin: 0 5px;
  44.             background-color: white;
  45.             border-radius: 100%;
  46.         }
  48.         .box .point-list .point.active {
  49.             background-color: #666666;
  50.         }
  52.         .box .point-list .point:hover {
  53.             cursor: pointer;
  54.         }
  56.         .skip {
  57.             position: absolute;
  58.             top: 220px;
  59.             display: inline-block;
  60.             margin: 10px;
  61.             padding-bottom: 3px 5px;
  62.             width: 40px;
  63.             height: 40px;
  64.             text-align: center;
  65.             line-height: 40px;
  66.             background-color: lightslategray;
  67.             color: white;
  68.             opacity: 0.4;
  69.             font-size: 36px;
  70.             border-radius: 50%;
  71.         }
  73.         .box .next {
  74.             right: 0;
  75.         }
  77.         .box .skip:hover {
  78.             cursor: pointer;
  79.             opacity: 0.7;
  80.             color: black;
  81.         }
  83.         .container {
  84.             width: 4800px;
  85.             position: absolute;
  86.             left: -800px;
  87.             overflow: hidden;
  88.         }
  89.     </style>
  90. </head>
  92. <body>
  93.     <div class="box">
  94.         <div class='container'>
  95.             <img src="/0817/imgs/07.jpg" alt=" " data-index="4" class="slider">
  96.             <img src="/0817/imgs/03.jpg" alt=" " data-index="1" class="slider">
  97.             <img src="/0817/imgs/08.jpg" alt=" " data-index="2" class="slider">
  98.             <img src="/0817/imgs/06.jpg" alt=" " data-index="3" class="slider">
  99.             <img src="/0817/imgs/07.jpg" alt=" " data-index="4" class="slider">
  100.             <img src="/0817/imgs/03.jpg" alt=" " data-index="1" class="slider">
  101.         </div>
  102.         <div class="point-list">
  103.         </div>
  104.         <span class="skip prev">&lt;</span>
  105.         <span class="skip next">&gt;</span>
  106.     </div>
  107.     <script>
  108.         // 圖片div
  109.         var div = document.querySelector(".container");
  110.         // 獲取按鈕
  111.         var next = document.querySelector(".next");
  112.         var prev = document.querySelector(".prev");
  113.         // 獲取小圓點(diǎn)父級(jí)
  114.         var pointlist = document.querySelector(".point-list");
  115.         // 獲取整個(gè)的div
  116.         var box = document.querySelector(".box");
  117.         var index = 1;
  118.         // 生成小圓點(diǎn)
  119.         for (var i = 0; i < 4; i++) {
  120.             var span = document.createElement("span");
  121.             // 添加樣式和自定義屬性
  122.             span.classList.add("point");
  123.             span.dataset.index = i + 1;
  124.             // 默認(rèn)第一個(gè)高亮
  125.             if (span.dataset.index == 1) {
  126.                 span.classList.add("active");
  127.             }
  128.             pointlist.appendChild(span);
  129.         }
  130.         // 判斷小圓點(diǎn)顯示函數(shù)
  131.         function navmove() {
  132.             for (var i = 0; i < span.length; i++) {
  133.                 span[i].classList.remove("active");
  134.             }
  135.             if (index >= 5) {
  136.                 span[index - 5].classList.add("active");
  137.             } else if (index <= 0) {
  138.                 span[index + 3].classList.add("active");
  139.             } else {
  140.                 span[index - 1].classList.add("active");
  141.             }
  143.         }
  145.         // 獲取樣式屬性
  146.         function getStyle(obj, attr) {
  147.             if (obj.currentStyle) {
  148.                 return obj.currentStyle[attr];
  149.             } else {
  150.                 return getComputedStyle(obj, null)[attr];
  151.             }
  152.         }
  153.         // 運(yùn)動(dòng)速度函數(shù)
  154.         function animate(obj) {
  155.             clearInterval(obj.timer);
  156.             obj.timer = setInterval(function () {
  157.                 var a = parseInt(getStyle(div, "left"));
  158.                 var speed = ((-800 * index) - a) / 8;
  160.                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  161.                 // console.log(speed);
  162.                 if (a === (-800 * index)) {
  163.                     clearInterval(obj.timer);
  164.                 } else {
  165.                     div.style.left = a + speed + "px";
  166.                 }
  167.             }, 30);
  169.         }
  170.         // 給小圓點(diǎn)綁定是點(diǎn)擊事件
  171.         var span = document.querySelectorAll(".point");
  172.         pointlist.addEventListener("click", function (ev) {
  173.             index = ev.target.dataset.index;
  174.             if (ev.target.dataset.index) {
  175.                 // 調(diào)用運(yùn)動(dòng)函數(shù)
  176.                 animate(span);
  177.                 navmove();
  178.             }
  180.         })
  181.         // 上一頁點(diǎn)擊事件
  182.         prev.addEventListener("click", function () {
  183.             index--;
  184.             console.log(index);
  185.             animate(prev);
  186.             // 判斷是否到頭，到頭重新定位
  187.             if (index === -1) {
  188.                 div.style.left = "-3200px";
  189.                 index = 3;
  190.             }
  191.             navmove();
  192.         });
  193.         // 下一頁點(diǎn)擊事件
  194.         next.addEventListener("click", function () {
  195.             index++;
  196.             animate(next);
  197.             // 判斷是否到頭，到頭重新定位
  198.             if (index === 6) {
  199.                 div.style.left = "-800px";
  200.                 index = 2;
  201.             }
  202.             navmove();
  204.         });
  205.         // 自動(dòng)播放
  206.         function time() {
  207.             index++;
  208.             animate(next);
  209.             if (index === 6) {
  210.                 div.style.left = "-800px";
  211.                 index = 2;
  212.             }
  213.             navmove();
  215.         }
  216.         var int = setInterval(time, 2000)
  217.         // 鼠標(biāo)移入停止播放
  218.         box.addEventListener("mouseover", function () {
  219.             clearInterval(int);
  220.             console.log(100);
  221.         })
  222.         // 鼠標(biāo)移出重新播放
  223.         box.addEventListener("mouseout", function () {
  224.             int = setInterval(time, 2000);
  225.         })
  226.     </script>
  227. </body>
  229. </html>

總結(jié)

1.輪播圖的滑動(dòng)效果弄了好久才勉強(qiáng)滿意 -_-||
2.對(duì)于js的事件操作更清楚了些

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：看上去還是不錯(cuò)的, 抽空 了解一下html標(biāo)簽中的新增的懶加載屬性
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

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

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