简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js 选项卡和轮播图的实现
Blogger Information
Blog 32
fans 0
comment 0
visits 27676
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 选项卡和轮播图的实现
Yang_Sir
Original
1078 people have browsed it
  • 利用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>

效果图：

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！