Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js经典案例实战
Blogger Information
Blog 55
fans 3
comment 0
visits 54696
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
1172 people have browsed it

js经典案例实战

一、经典选项卡

  • demo1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>经典选项卡案例</title>
  7.     <link rel="stylesheet" href="css/demo1.css" />
  8.   </head>
  9.   <body>
  10.     <div>
  11.       <ul class="tab">
  12.         <li data-index="1" class="navigation state">水果</li>
  13.         <li data-index="2" class="navigation">手机</li>
  14.         <li data-index="3" class="navigation">汽车</li>
  15.       </ul>
  17.       <ul data-index="1" class="item state">
  18.         <li><a href="">西瓜</a></li>
  19.         <li><a href="">猕猴桃</a></li>
  20.         <li><a href="">芒果</a></li>
  21.         <li><a href="">橙子</a></li>
  22.         <li><a href="">苹果</a></li>
  23.       </ul>
  25.       <ul data-index="2" class="item hidden">
  26.         <li><a href="">华为</a></li>
  27.         <li><a href="">Vivo</a></li>
  28.         <li><a href="">OPPO</a></li>
  29.         <li><a href="">小米</a></li>
  30.         <li><a href="">魅族</a></li>
  31.       </ul>
  33.       <ul data-index="3" class="item hidden">
  34.         <li><a href="">吉利</a></li>
  35.         <li><a href="">长城</a></li>
  36.         <li><a href="">奇瑞</a></li>
  37.         <li><a href="">长安</a></li>
  38.         <li><a href="">比亚迪</a></li>
  39.       </ul>
  40.     </div>
  41.   </body>
  42.   <script src="js/demo1.js"></script>
  43. </html>
  • demo1.css
  1. * {
  2.   padding: 0px;
  3.   margin: 0px;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8. }
  9. ul {
  10.   list-style: none;
  11. }
  12. body {
  13.   display: flex;
  14.   justify-content: center;
  15. }
  16. div {
  17.   width: 300px;
  18.   height: 340px;
  19. }
  20. div > ul:nth-of-type(1) {
  21.   display: flex;
  22. }
  23. .hidden {
  24.   display: none;
  25. }
  26. .navigation {
  27.   width: 100px;
  28.   height: 40px;
  29.   text-align: center;
  30.   line-height: 40px;
  31. }
  32. .navigation:hover {
  33.   cursor: pointer;
  34. }
  35. .state {
  36.   background: rgb(204, 204, 204);
  37. }
  38. .item {
  39.   width: 300px;
  40.   height: 300px;
  41. }
  42. .content > li {
  43.   height: 30px;
  44.   text-align: center;
  45.   padding: 10px 0;
  46. }
  • demo1.js
  1. //1.获取导航ul
  2. var tab = document.querySelector(".tab");
  3. //console.log(tab);
  4. //2.获取详情页
  5. var items = document.querySelectorAll(".item");
  6. //3.给导航添加点击事件(事件代理/事件委托/冒泡)
  7. tab.addEventListener("click", show, false);
  8. tab.addEventListener("mouseover", show, false);
  9. //声明show函数
  10. function show(ev) {
  11.   //ev:事件对象
  12.   //ev.type:事件类型，如click,mouseover...
  13.   //console.log(ev.type);
  14.   //ev.target事件的触发者
  15.   //console.log(ev.target);
  16.   //ev.currentTarget事件绑定者
  17.   //console.log(ev.currentTarget);
  18.   //1.清空所有选项卡高亮显示
  19.   //childNodes返回数组
  20.   ev.currentTarget.childNodes.forEach(function (item) {
  21.     if (item.nodeType === 1) item.classList.remove("state");
  22.   });
  23.   //2.将用户点击的当前选项卡高亮显示
  24.   ev.target.classList.add("state");
  25.   //3.清空原有列表
  26.   items.forEach(function (item) {
  27.     item.classList.add("hidden");
  28.     item.classList.remove("state");
  29.   });
  30.   //4.将选项卡对应的内容进行切换（根据导航和详情中的data-index）
  31.   items.forEach(function (item) {
  32.     console.log(item);
  33.     //console.log(ev.target.dataset.index, item.dataset.index);
  34.     if (ev.target.dataset.index === item.dataset.index) {
  35.       item.classList.add("state");
  36.       item.classList.remove("hidden");
  37.     }
  38.   });
  39. }

二、懒加载

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       img {
  9.         width: 400px;
  10.       }
  11.       body {
  12.         display: flex;
  13.         flex-flow: column;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <img src="images/moban.jpg" alt="" data-src="images/1.jpg" />
  19.     <img src="images/moban.jpg" alt="" data-src="images/2.jpg" />
  20.     <img src="images/moban.jpg" alt="" data-src="images/3.jpg" />
  21.     <img src="images/moban.jpg" alt="" data-src="images/4.jpg" />
  22.     <img src="images/moban.jpg" alt="" data-src="images/5.jpg" />
  23.     <img src="images/moban.jpg" alt="" data-src="images/6.jpg" />
  24.     <img src="images/moban.jpg" alt="" data-src="images/7.jpg" />
  25.     <img src="images/moban.jpg" alt="" data-src="images/8.jpg" />
  26.     <img src="images/moban.jpg" alt="" data-src="images/9.jpg" />
  27.     <img src="images/moban.jpg" alt="" data-src="images/10.jpg" />
  28.     <img src="images/moban.jpg" alt="" data-src="images/11.jpg" />
  29.     <img src="images/moban.jpg" alt="" data-src="images/12.jpg" />
  30.     <img src="images/moban.jpg" alt="" data-src="images/13.jpg" />
  31.     <img src="images/moban.jpg" alt="" data-src="images/14.jpg" />
  32.   </body>
  33.   <script>
  34.     //1.获取所有的图片
  35.     var imgs = document.querySelectorAll("img");
  36.     //2.获取文档高度/视口高度
  37.     var clientHeight = document.documentElement.clientHeight;
  38.     //3.监听滚动事件
  39.     window.addEventListener(
  40.       "scroll",
  41.       function () {
  42.         lazyload(imgs, clientHeight);
  43.       },
  44.       false
  45.     );
  46.     //4.懒加载函数
  47.     function lazyload(imgs, clientHeight) {
  48.       //获取文档的滚动大小
  49.       var scrollTop = document.documentElement.scrollTop;
  50.       //遍历图片，判断是否进入到可视区
  51.       imgs.forEach(function (img) {
  52.         if (img.offsetTop <= clientHeight + scrollTop) {
  53.           img.src = img.dataset.src;
  54.         }
  55.       });
  56.     }
  57.   </script>
  58. </html>

三、轮播图

  • demo3.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>轮播图</title>
  7.     <link rel="stylesheet" href="css/demo3.css" />
  8.   </head>
  9.   <body>
  10.     <div class="box" id="box">
  11.       <img src="images/1.jpg" alt="" data-index="1" class="slider active" />
  12.       <img src="images/2.jpg" alt="" data-index="2" class="slider" />
  13.       <img src="images/3.jpg" alt="" data-index="3" class="slider" />
  14.       <img src="images/4.jpg" alt="" data-index="4" class="slider" />
  15.       <div class="point-list"></div>
  16.       <span class="skip prev">&lt;</span>
  17.       <span class="skip next">&gt;</span>
  18.     </div>
  19.   </body>
  20.   <script src="js/demo3.js"></script>
  21. </html>
  • css/demo3.css
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. ul,
  7. li {
  8.   list-style: none;
  9. }
  10. .box {
  11.   position: relative;
  12.   width: 500px;
  13.   height: 300px;
  14.   margin: 0 auto;
  15. }
  16. .slider {
  17.   width: 500px;
  18.   height: 300px;
  19.   display: none;
  20. }
  22. .box .slider.active {
  23.   display: block;
  24. }
  25. .box .point-list {
  26.   position: absolute;
  27.   left: 43%;
  28.   top: 270px;
  29. }
  30. .box .point-list .point {
  31.   display: inline-block;
  32.   width: 12px;
  33.   height: 12px;
  34.   background: #fff;
  35.   border-radius: 100%;
  36.   margin: 0 5px;
  37. }
  38. .box .point-list .point:hover {
  39.   cursor: pointer;
  40. }
  41. .box .point-list .point.active {
  42.   background: rgb(241, 3, 3);
  43. }
  44. .skip {
  45.   position: absolute;
  46.   display: inline-block;
  47.   width: 30px;
  48.   height: 40px;
  49.   top: 130px;
  50.   font-size: 40px;
  51.   text-align: center;
  52.   line-height: 40px;
  53.   background: #000;
  54.   color: #fff;
  55.   opacity: 0.4;
  56. }
  57. .prev {
  58.   left: 0;
  59. }
  60. .next {
  61.   right: 0;
  62. }
  63. .skip:hover {
  64.   cursor: pointer;
  65.   opacity: 0.7;
  66.   color: red;
  67. }
  • demo3.js
  1. window.onload = function () {
  2.   //获取轮播图片
  3.   var imgs = document.querySelectorAll("img");
  5.   //获取小圆点组
  6.   var pointList = document.querySelector(".point-list");
  8.   //动态生成小圆点
  9.   imgs.forEach(function (img, index) {
  10.     //根据图片数量创建对应的span元素
  11.     var span = document.createElement("span");
  12.     //给第一个span元素添加特殊样式
  13.     if (index == 0) span.classList.add("point", "active");
  14.     //其它span元素为默认样式
  15.     span.classList.add("point");
  16.     //给当前小圆点添加自定义的data-index
  17.     span.dataset.index = img.dataset.index;
  18.     //把所有span元素添加到小圆点组中显示
  19.     pointList.appendChild(span);
  20.   });
  22.   //获取所有的小圆点
  23.   var points = document.querySelectorAll(".point");
  25.   /*————————————————————————————————轮播功能————————————————————————————————————*/
  26.   //获取最顶层div
  27.   var box = document.querySelector("#box");
  28.   console.log(box);
  29.   //创建定时器变量，索引变量
  30.   var timer = null;
  31.   var index = 0;
  32.   //创建定时器并自动执行
  33.   timer = setInterval(autoPlay, 2000);
  34.   //当鼠标移入div元素时清空定时器
  35.   box.addEventListener("mouseover", test, false);
  36.   //当鼠标离开元素时触发定时器
  37.   box.addEventListener(
  38.     "mouseout",
  39.     function () {
  40.       timer = setInterval(autoPlay, 2000);
  41.     },
  42.     false
  43.   );
  44.   //鼠标离开元素时的定时器回调函数，index自增
  45.   function autoPlay() {
  46.   //如果自增index大于图片数量时，让索引为0
  47.     if (++index >= imgs.length) index = 0;
  48.     //定义函数把index值传进去
  49.     changeImg(index);
  50.   }
  51.   function changeImg(currIndex) {
  52.     console.log(currIndex);
  53.     //清空所有样式，隐藏所有图片
  54.     for (var i = 0; i < imgs.length; i++) {
  55.       points[i].classList.remove("active");
  56.       imgs[i].classList.remove("active");
  57.     }
  58.     //给有当前索引的图片和小点添加样式并显示
  59.     points[currIndex].classList.add("active");
  60.     imgs[currIndex].classList.add("active");
  61.   }
  62.   //鼠标移入时的回调函数，清除定时器
  63.   function test() {
  64.     clearInterval(timer);
  65.     console.log("清除定时器");
  66.   }
  68.   //给小圆点添加事件(代理)
  69.   pointList.addEventListener("click", function (ev) {
  70.     imgs.forEach(function (img) {
  71.       if (img.dataset.index === ev.target.dataset.index) {
  72.         imgs.forEach(function (img) {
  73.           img.classList.remove("active");
  74.         });
  75.         img.classList.add("active");
  76.         //设置与当前图片对应的小圆点高亮显示
  77.         //因为这个功能要多处使用，这里将它声明为公共函数
  78.         setPointActive(img.dataset.index);
  79.       }
  80.     });
  81.   });
  82.   //设置与当前图片对应的小圆点高亮显示
  83.   function setPointActive(imgIndex) {
  84.     //清空小圆点所有样式
  85.     points.forEach(function (point) {
  86.       point.classList.remove("active");
  87.     });
  88.     //当前小圆点的索引和图片的索引相同时，再给小圆点添加特殊样式
  89.     points.forEach(function (point) {
  90.       if (point.dataset.index === imgIndex) point.classList.add("active");
  91.     });
  92.   }
  94.   /*————————————————————————————————翻页功能————————————————————————————————————*/
  95.   //获取翻页按钮
  96.   var skip = document.querySelectorAll(".skip");
  98.   //添加事件
  99.   skip.item(0).addEventListener("click", skipImg, false);
  100.   skip.item(1).addEventListener("click", skipImg, false);
  102.   //翻页显示图片的回调方法
  103.   function skipImg(ev) {
  104.     //获取当前图片
  105.     var currentImg = null;
  106.     imgs.forEach(function (img) {
  107.       if (img.classList.contains("active")) {
  108.         currentImg = img;
  109.       }
  110.     });
  112.     //2.判断是否是点击了显示前一张的按钮
  113.     if (ev.target.classList.contains("prev")) {
  114.       //为了显示出来前一张图片，必须将当前图片的激活去掉
  115.       currentImg.classList.remove("active");
  116.       //将当前图片的前一张图片设置为当前图片
  117.       currentImg = currentImg.previousElementSibling;
  118.       //如果存在前一张，再显示，否则进入循环，显示最后一张
  119.       if (currentImg !== null && currentImg.nodeName === "IMG") {
  120.         currentImg.classList.add("active");
  121.       } else {
  122.         currentImg = imgs[imgs.length - 1];
  123.         currentImg.classList.add("active");
  124.       }
  125.     }
  127.     //3.判断是否是点击了显示后一张的按钮
  128.     if (ev.target.classList.contains("next")) {
  129.       //为了显示出来后一张图片，必须将当前图片的激活去掉
  130.       currentImg.classList.remove("active");
  131.       //将当前图片的后一张图片设置为当前图片
  132.       currentImg = currentImg.nextElementSibling;
  133.       console.log(currentImg);
  134.       //如果存在后一张，再显示，否则进入循环，显示第一张
  135.       if (currentImg !== null && currentImg.nodeName === "IMG") {
  136.         currentImg.classList.add("active");
  137.       } else {
  138.         currentImg = imgs[0];
  139.         currentImg.classList.add("active");
  140.       }
  141.     }
  142.     //小圆点高亮
  143.     setPointActive(currentImg.dataset.index);
  144.   }
  145. };

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：目前已经有支持懒加载的元素属性的, 原生支持, 以后写这样的代码会越来越轻松
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