search

博客列表 >轮播图、选项卡实战

轮播图、选项卡实战

海阔天空
海阔天空原创
2020年05月28日 19:17:36781浏览

轮播图 选项卡实战

轮播图代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>经典轮播图</title>
  6.     <style>
  7.       ul,
  8.       li {
  9.         margin: 0;
  10.         padding: 0;
  11.         list-style: none;
  12.       }
  14.       .box {
  15.         /*定位父级*/
  16.         position: relative;
  17.         width: 1000px;
  18.         height: 350px;
  19.         margin: 0 auto;
  20.       }
  22.       .box .slider {
  23.         width: 1000px;
  24.         height: 350px;
  25.         display: none;
  26.       }
  28.       .box .slider.active {
  29.         display: block;
  30.       }
  32.       .box .point-list {
  33.         position: absolute;
  34.         /*绝对定位的环境下的水平居中方式*/
  35.         left: 50%;
  36.         margin-left: -38px;
  37.         top: 310px;
  38.       }
  40.       .box .point-list .point {
  41.         display: inline-block;
  42.         width: 12px;
  43.         height: 12px;
  44.         margin: 0 5px;
  45.         background-color: white;
  46.         border-radius: 100%;
  47.       }
  49.       .box .point-list .point.active {
  50.         background-color: black;
  51.       }
  53.       .box .point-list .point:hover {
  54.         cursor: pointer;
  55.       }
  57.       .skip {
  58.         position: absolute;
  59.         top: 140px;
  60.         display: inline-block;
  61.         width: 40px;
  62.         height: 80px;
  63.         text-align: center;
  64.         line-height: 80px;
  65.         background-color: lightgray;
  66.         color: white;
  67.         opacity: 0.2;
  68.         font-size: 36px;
  69.       }
  71.       .box .prev {
  72.         left: 0;
  73.       }
  75.       .box .next {
  76.         right: 0;
  77.       }
  79.       .box .skip:hover {
  80.         cursor: pointer;
  81.         opacity: 0.5;
  82.         color: black;
  83.       }
  84.     </style>
  85.   </head>
  87.   <body>
  88.     <div class="box">
  89.       <img
  90.         src="banner/banner1.jpg"
  91.         alt=""
  92.         data-index="1"
  93.         class="slider active"
  94.       />
  95.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  96.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  97.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  99.       <div class="point-list">
  100.         <!-- <span class="point active" data-index="1"></span>
  101.         <span class="point" data-index="2"></span>
  102.         <span class="point" data-index="3"></span>
  103.         <span class="point" data-index="4"></span> -->
  104.       </div>
  106.       <span class="skip prev">&lt;</span>
  107.       <span class="skip next">&gt;</span>
  108.     </div>
  109.     <script>
  110.       var cl = console.log.bind(console);
  111.       //轮播图片组
  112.       var imgs = document.querySelectorAll("img");
  113.       cl(imgs);
  114.       var pointList = document.querySelector(".point-list");
  115.       //动态生成小圆点
  116.       imgs.forEach(function (img, index) {
  117.         var span = document.createElement("span");
  118.         if (index === 0) span.classList.add("point", "active");
  119.         span.classList.add("point");
  120.         //将小圆点与当前显示的图片的索引进行关联
  121.         span.dataset.index = img.dataset.index;
  122.         pointList.appendChild(span);
  123.       });
  124.       //   cl(pointList);
  125.       //为了正确的设置小圆点高亮，需要获取到所有的小圆点
  126.       var points = document.querySelectorAll(".point");
  127.       //事件代理/委托：给小圆点添加点击事件
  128.       pointList.addEventListener(
  129.         "click",
  130.         function (ev) {
  131.           // cl(ev.target);
  132.           imgs.forEach(function (img) {
  133.             if (img.dataset.index === ev.target.dataset.index) {
  134.               //先取消所有图片的激活属性
  135.               imgs.forEach(function (img) {
  136.                 img.classList.remove("active");
  137.               });
  138.               //设置当前图片的激活样式
  139.               img.classList.add("active");
  140.               //公共函数：设置小圆点当前的高亮，必须与图片一一对应，同步
  141.               setPointActive(img.dataset.index);
  142.             }
  143.           });
  144.         },
  145.         false
  146.       );
  147.       //公共函数：setPointActive
  148.       function setPointActive(imgIndex) {
  149.         //清除原来的所有的小圆点上的高亮
  150.         points.forEach(function (point) {
  151.           point.classList.remove("active");
  152.         });
  153.         //为当前小黑点设置高亮
  154.         points.forEach(function (point) {
  155.           if (point.dataset.index === imgIndex) point.classList.add("active");
  156.         });
  157.       }
  159.       //获取翻页按钮
  160.       var skip = document.querySelectorAll(".skip");
  161.       //添加事件
  162.       skip.item(0).addEventListener("click", skipImg, false);
  163.       skip.item(1).addEventListener("click", skipImg, false);
  164.       //翻页事件回调
  165.       function skipImg(ev) {
  166.         //遍历并找到当前正在显示的图片
  167.         var currentImg = null;
  168.         imgs.forEach(function (img) {
  169.           if (img.classList.contains("active")) currentImg = img;
  170.         });
  171.         //1.判断是否是点击了显示前一张
  172.         if (ev.target.classList.contains("prev")) {
  173.           currentImg.classList.remove("active");
  174.           currentImg = currentImg.previousElementSibling;
  175.           //   cl(currentImg);
  176.           //如果存在前一张
  177.           if (currentImg !== null && currentImg.nodeName === "IMG")
  178.             //显示当前图片
  179.             currentImg.classList.add("active");
  180.           else {
  181.             //否则就显示最后一张，形成循环
  182.             currentImg = imgs[imgs.length - 1];
  183.             currentImg.classList.add("active");
  184.           }
  185.         }
  186.         //2.判断是否点击了显示下一张
  187.         if (ev.target.classList.contains("next")) {
  188.           currentImg.classList.remove("active");
  189.           currentImg = currentImg.nextElementSibling;
  190.           //   cl(currentImg);
  191.           //如果存在下一张
  192.           if (currentImg !== null && currentImg.nodeName === "IMG")
  193.             //显示当前图片
  194.             currentImg.classList.add("active");
  195.           else {
  196.             //否则就显示第一张，形成循环
  197.             currentImg = imgs[0];
  198.             currentImg.classList.add("active");
  199.           }
  200.         }
  201.         //调用公共函数：设置小圆点当前的高亮，与图片一一对应
  202.         setPointActive(currentImg.dataset.index);
  203.       }
  205.       var box = document.querySelector(".box");
  206.       var timer = null;
  207.       //1.当鼠标移出轮播图区域时，启动定时器，每2秒自动切换图片
  208.       box.addEventListener("mouseout", startTimer, false);
  209.       //2.当鼠标移入轮播图区域时，清除定时器，由用户点击操作
  210.       box.addEventListener("mouseover", clearTimer, false);
  211.       //启动定时器
  212.       function startTimer() {
  213.         var click = new Event("click");
  214.         //setInterval():间歇式执行，单位毫秒
  215.         if (timer != null) {
  216.           //判断计时器是否为空
  217.           clearInterval(timer);
  218.           timer = null;
  219.         }
  220.         timer = setInterval(function () {
  221.           skip.item(1).dispatchEvent(click);
  222.         }, 2000); //启动计时器，调用overs函数，
  223.       }
  225.       //清除定时器
  226.       function clearTimer() {
  227.         clearInterval(timer);
  228.       }
  229.     </script>
  230.   </body>
  231. </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.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       a {
  13.         text-decoration: none;
  14.         color: #555;
  15.       }
  16.       a:hover {
  17.         text-decoration: underline;
  18.         color: red;
  19.       }
  20.       li {
  21.         list-style: none;
  22.       }
  23.       li:hover {
  24.         cursor: default;
  25.       }
  26.       .tabs {
  27.         width: 300px;
  28.         height: 300px;
  29.         margin: 30px;
  30.         background-color: #ddd;
  32.         display: flex;
  33.         flex-direction: column;
  34.       }
  36.       .tab {
  37.         height: 36px;
  38.         display: flex;
  39.       }
  40.       .tab li {
  41.         flex: auto;
  42.         text-align: center;
  43.         line-height: 36px;
  44.         background-color: #fff;
  45.       }
  46.       .tab li.active {
  47.         background-color: #ddd;
  48.       }
  50.       /* 默认所有选项卡只有一个显示,其它隐藏 */
  51.       .item {
  52.         padding: 20px;
  53.         display: none;
  54.       }
  55.       .item.active {
  56.         display: block;
  57.       }
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <div class="tabs">
  62.       <!-- 导航 -->
  63.       <ul class="tab">
  64.         <li class="active" data-index="1">水果</li>
  65.         <li data-index="2">手机</li>
  66.         <li data-index="3">汽车</li>
  67.       </ul>
  69.       <!-- 详情1 -->
  70.       <ul class="item active" data-index="1">
  71.         <li><a href="">哈密瓜</a></li>
  72.         <li><a href="">葡萄</a></li>
  73.         <li><a href="">香蕉</a></li>
  74.       </ul>
  76.       <!-- 详情2 -->
  77.       <ul class="item" data-index="2">
  78.         <li><a href="">华为</a></li>
  79.         <li><a href="">小米</a></li>
  80.         <li><a href="">OPPO</a></li>
  81.       </ul>
  83.       <!-- 详情2 -->
  84.       <ul class="item" data-index="3">
  85.         <li><a href="">吉利</a></li>
  86.         <li><a href="">奇瑞</a></li>
  87.         <li><a href="https://www.baidu.com">长城</a></li>
  88.       </ul>
  89.     </div>
  90.     <script>
  91.       var cl = console.log.bind(console);
  92.       //导航：事件委托
  93.       var tab = document.querySelector(".tab");
  94.       //列表
  95.       var items = document.querySelectorAll(".item");
  96.       //给导航绑定点击事件
  97.       tab.addEventListener("click", show, false);
  98.       //给导航绑定鼠标移动事件
  99.       tab.addEventListener("mouseover", show, false);
  100.       //事件回调函数
  101.       function show(ev) {
  102.         cl(ev.target);
  103.         //1、清空导航原有的激活
  104.         ev.target.parentNode.childNodes.forEach(function (item) {
  105.           if (item.nodeType === 1) item.classList.remove("active");
  106.         });
  107.         //2、将当前用户正在点击的导航设置为激活
  108.         ev.target.classList.add("active");
  109.         //3、清空列表的原有激活
  110.         items.forEach(function (item) {
  111.           item.classList.remove("active");
  112.         });
  113.         //4、在列表中查询data-index与导航的data-index相等的内容，将它设置为激活
  114.         items.forEach(function (item) {
  115.           if (item.dataset.index === ev.target.dataset.index)
  116.             item.classList.add("active");
  117.         });
  118.       }
  119.     </script>
  120.   </body>
  121. </html>

选项卡效果图

总结：
1.评论、选项卡、轮播图、懒加载是常用功能，老师讲得内容非常实用。
2.js变量、函数区分大小写。编程时需注意。
3.在使用定时器功能时，图片转换时快时慢，鼠标停留在图片上时，不能正常停止播放。对setInterval方法返回的值做了一个判断，判断是否是空值，若不是空值，则要停止定时器并将值设为空，再重新启动，运行完美。

上一条：JavaScript获取DOM元素，变量节点元素下一条：2020-05-28——如何使用CSS在鼠标悬停时缩放图像？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多