search

博客列表 >选项卡，懒加载和轮播图简单演示（0817）

选项卡，懒加载和轮播图简单演示（0817）

丶久而旧之丶
丶久而旧之丶原创
2020年09月27日 18:23:30809浏览

JS事件操作

选项卡

  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.         * {
  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.         <!-- 导航区 -->
  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.         <!-- 详情区 -->
  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="">一点点</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.             // 给事件触发者添加样式
  98.             ev.target.classList.add("active");
  100.             // 再清除详情区样式
  101.             items.forEach(function (item) {
  102.                 // 先清除详情区样式
  103.                 item.classList.remove("active");
  104.                 // 判断自定义属性，相等的情况下显示详情区
  105.                 if (ev.target.dataset.index === item.dataset.index) {
  106.                     item.classList.add("active");
  107.                 }
  108.             });
  109.             // 显示相应详情区
  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.             // 获取文档的滚动高度
  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.         // 获取小圆点父级
  114.         var pointlist = document.querySelector(".point-list");
  115.         // 获取整个的div
  116.         var box = document.querySelector(".box");
  117.         var index = 1;
  118.         // 生成小圆点
  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.             // 默认第一个高亮
  125.             if (span.dataset.index == 1) {
  126.                 span.classList.add("active");
  127.             }
  128.             pointlist.appendChild(span);
  129.         }
  130.         // 判断小圆点显示函数
  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.         // 运动速度函数
  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.         // 给小圆点绑定是点击事件
  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.                 // 调用运动函数
  176.                 animate(span);
  177.                 navmove();
  178.             }
  180.         })
  181.         // 上一页点击事件
  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.         // 下一页点击事件
  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.         // 自动播放
  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.         // 鼠标移入停止播放
  218.         box.addEventListener("mouseover", function () {
  219.             clearInterval(int);
  220.             console.log(100);
  221.         })
  222.         // 鼠标移出重新播放
  223.         box.addEventListener("mouseout", function () {
  224.             int = setInterval(time, 2000);
  225.         })
  226.     </script>
  227. </body>
  229. </html>

总结

1.轮播图的滑动效果弄了好久才勉强满意 -_-||
2.对于js的事件操作更清楚了些

上一条：WebSocket掉线重连的解决办法下一条：中秋节H5小游戏营销，月饼能吃还能玩
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多