search

博客列表 >js 选项卡和轮播图的实现

js 选项卡和轮播图的实现

Yang_Sir
Yang_Sir原创
2020年06月01日 16:13:311087浏览
  • 利用js，可以大大提升网页交互能力，如鼠标移动、点击事件，按键事件等等。
  • js定时器可以实现动态页面。

1. 选项卡

  • 主要原理是利用标签的点击事件触发，更改相关标签的样式
  • 通过自定义的data-index属性找到对应的内容块
  • 只显示激活状态的标签，其它隐藏

1.页面元素

  1.   <body>
  2.     <div class="container">
  3.       <ul class="titlec">
  4.         <li class="title active" data-index="1">分类1</li>
  5.         <li class="title" data-index="2">分类2</li>
  6.         <li class="title" data-index="3">分类3</li>
  7.         <li class="title" data-index="4">分类4</li>
  8.       </ul>
  9.       <ol class="content active" data-index="1">
  10.         <li>内容1</li>
  11.         <li>内容1</li>
  12.         <li>内容1</li>
  13.         <li>内容1</li>
  14.       </ol>
  15.       <ol class="content" data-index="2">
  16.         <li>内容2</li>
  17.         <li>内容2</li>
  18.         <li>内容2</li>
  19.         <li>内容2</li>
  20.       </ol>
  21.       <ol class="content" data-index="3">
  22.         <li>内容3</li>
  23.         <li>内容3</li>
  24.         <li>内容3</li>
  25.         <li>内容3</li>
  26.       </ol>
  27.       <ol class="content" data-index="4">
  28.         <li>内容4</li>
  29.         <li>内容4</li>
  30.         <li>内容4</li>
  31.         <li>内容4</li>
  32.       </ol>
  33.     </div>
  35.   </body>

2.css样式

  1. <style>
  2.       .container {
  3.         width: 400px;
  4.         border: 1px solid #cccccc;
  5.       }
  6.       .titlec {
  7.         width: 400px;
  8.         display: grid;
  9.         grid-template-columns: repeat(4, 1fr);
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       .titlec li {
  14.         font-size: 18px;
  15.         color: red;
  16.         text-align: center;
  17.         list-style: none;
  18.         padding: 0 10px;
  19.         cursor: pointer;
  20.         border-right: 1px solid #cccccc;
  21.       }
  22.       .content.active {
  23.         background-color: #00ffff;
  24.         display: block;
  25.       }
  26.       .active {
  27.         background-color: #00ffff;
  28.       }
  29.       .content {
  30.         display: none;
  31.         margin-top: 0;
  32.       }
  33.     </style>

3.js代码

  1. <script>
  2.       //获取所有内容标签ol
  3.       var ols = document.querySelectorAll("ol");
  4.       //标题标签ul
  5.       var titlec = document.querySelector(".titlec");
  6.       //获取所有标题
  7.       var titles = document.querySelectorAll(".title");
  8.       //为标题添加鼠标悬停事件
  9.       titlec.addEventListener("mouseover", show, false);
  10.       //为标题添加点击事件
  11.       titlec.addEventListener("click", show, false);
  13.       function show(ev) {
  14.         //console.log(ev);
  15.         //去掉所有的激活active状态
  16.         titles.forEach(function (title) {
  17.           title.classList.remove("active");
  18.         });
  19.         ols.forEach(function (ol) {
  20.           //把与标题data-index属性值一样的内容标签激活active
  21.           if (ol.dataset.index === ev.target.dataset.index) {
  22.             ol.classList.add("active");
  23.           } else {
  24.             ol.classList.remove("active");
  25.           }
  26.         });
  27.         //设置当前标签为激活状态
  28.         ev.target.classList.add("active");
  29.       }
  30.     </script>

效果图：

2. 轮播图

  • 轮播图的样式主要使用定位的方式，是圆点和翻译按钮显示在图片上层
  • 只显示当前图片，隐藏其它图片
  • 用js设置点击事件，以及定时器自动触发翻页点击事件

1.页面元素

  1.     <div class="box">
  2.       <img
  3.         src="banner/banner1.jpg"
  4.         alt=""
  5.         data-index="1"
  6.         class="slider active"/>
  7.         <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  8.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  9.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  10.       <div class="point-list"></div>
  11.       <span class="skip prev">&lt;</span>
  12.       <span class="skip next">&gt;</span>
  13.     </div>

2.css样式

  1. <style>
  2.     .box {
  3.       position: relative;
  4.       width: 1000px;
  5.       height: 350px;
  6.       margin: 0 auto;
  7.     }
  8.     .box .slider {
  9.       width: 1000px;
  10.       height: 350px;
  11.       display: none;
  12.     }
  13.     .box .slider.active {
  14.       display: block;
  15.     }
  17.     .box .point-list {
  18.       position: absolute;
  19.       left: 50%;
  20.       margin-left: -38px;
  21.       top: 310px;
  22.     }
  24.     .box .point-list .point {
  25.       display: inline-block;
  26.       width: 12px;
  27.       height: 12px;
  28.       margin: 0 5px;
  29.       background-color: #ffffff;
  30.       border-radius: 100%;
  31.     }
  32.     .box .point-list .point.active {
  33.       background-color: #000000;
  34.     }
  35.     .box .point-list .point:hover {
  36.       cursor: pointer;
  37.     }
  39.     .skip {
  40.       position: absolute;
  41.       top: 140px;
  42.       width: 40px;
  43.       height: 80px;
  44.       text-align: center;
  45.       line-height: 80px;
  46.       background-color: lightgray;
  47.       color: white;
  48.       font-size: 36px;
  49.       opacity: 0.2;
  50.     }
  51.     .prev {
  52.       left: 0;
  53.     }
  54.     .next {
  55.       right: 0;
  56.     }
  57.     .skip:hover {
  58.       cursor: pointer;
  59.       opacity: 0.5;
  60.       color: #0080ff;
  61.     }
  62.   </style>

3.js代码

  1. <script>
  2.       //所有图片
  3.       var imgs = document.querySelectorAll("img");
  4.       //小圆点的容器
  5.       var pointList = document.querySelector(".point-list");
  7.       //根据图片数量动态生成圆点
  8.       imgs.forEach(function (img, index) {
  9.         var span = document.createElement("span");
  10.         if (index === 0) {
  11.           span.classList.add("point", "active");
  12.         } else {
  13.           span.classList.add("point");
  14.         }
  15.         //为小圆点标签设置与图片相同值的自定义属性index
  16.         span.dataset.index = img.dataset.index;
  17.         //把圆点添加到容器中
  18.         pointList.appendChild(span);
  19.       });
  21.       //获取所有圆点
  22.       var points = document.querySelectorAll(".point");
  24.       //为小圆点添加点击事件
  25.       pointList.addEventListener(
  26.         "click",
  27.         function (ev) {
  28.           console.log(ev.target);
  30.           imgs.forEach(function (img) {
  31.             if (img.dataset.index === ev.target.dataset.index) {
  32.               //激活当前图片
  33.               img.classList.add("active");
  34.               //更新小圆点样式
  35.               setPointActive(img.dataset.index);
  36.             } else {
  37.               //隐藏其它图片
  38.               img.classList.remove("active");
  39.             }
  40.           });
  41.         },
  42.         false
  43.       );
  45.       //自定义更新圆点激活样式函数
  46.       function setPointActive(imgIndex) {
  47.         points.forEach(function (point) {
  48.           if (point.dataset.index === imgIndex) {
  49.             point.classList.add("active");
  50.           } else {
  51.             point.classList.remove("active");
  52.           }
  53.         });
  54.       }
  56.       //前后翻页事件
  57.       var prev = document.querySelector(".skip.prev");
  58.       var next = document.querySelector(".skip.next");
  59.       prev.addEventListener("click", skipImg, false);
  60.       next.addEventListener("click", skipImg, false);
  62.       function skipImg(ev) {
  63.         //1.找到当前显示的图片
  64.         var currentImg = document.querySelector(".slider.active");
  65.         //2.去掉当前图片的激活样式
  66.         currentImg.classList.remove("active");
  68.         //3.1如果点击的是向前
  69.         if (ev.target.classList.contains("prev")) {
  70.           //指向前一个兄弟元素
  71.           currentImg = currentImg.previousElementSibling;
  73.           //如果前一个图片元素不存在，则指向最后一个图片元素
  74.           if (currentImg === null || currentImg.nodeName !== "IMG") {
  75.             currentImg = imgs[imgs.length - 1];
  76.           }
  77.         }
  79.         //3.2如果点击的是向后
  80.         if (ev.target.classList.contains("next")) {
  81.           //指向后一个兄弟元素
  82.           currentImg = currentImg.nextElementSibling;
  84.           //如果后一个图片元素不存在，指向第一个图片元素
  85.           if (currentImg === null || currentImg.nodeName !== "IMG") {
  86.             currentImg = imgs[0];
  87.           }
  88.         }
  90.         //4.为最终指向的图片添加激活样式
  91.         currentImg.classList.add("active");
  93.         //5.更新小圆点样式
  94.         setPointActive(currentImg.dataset.index);
  95.       }
  97.       //定时器，自动向后翻页
  98.       var box = document.querySelector(".box");
  99.       var timer = null;
  101.       //1.自动执行
  102.       startTimer();
  104.       //2.当鼠标移出轮播区时，启动定时器
  105.       box.addEventListener("mouseout", startTimer, false);
  107.       //3.当鼠标移入轮播区时，清理定时器
  108.       box.addEventListener("mouseover", clearTimer, false);
  110.       //定时器
  111.       function startTimer() {
  112.         var click = new Event("click");
  113.         timer = setInterval(function () {
  114.           next.dispatchEvent(click);
  115.         }, 5000);
  116.       }
  118.       // 清除定时器
  119.       function clearTimer() {
  120.         clearInterval(timer);
  121.       }
  122.     </script>

效果图：

上一条：JQuery中html元素的DOM操作，动态添加删除：菜品类别和菜品类别对应的菜品下一条：AJAX异步请求
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多