search

博客列表 >js经典案例实战

js经典案例实战

王佳祥
王佳祥原创
2020年08月28日 09:32:331165浏览

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. };

上一条：front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）下一条：PHP初探Redis
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多