Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS经典轮播图和选项卡
Blogger Information
Blog 14
fans 0
comment 0
visits 8283
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
646 people have browsed it

1. 选项卡

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>选项卡</title>
  9.     <style>
  10.         .box {
  11.             width: 100vw;
  12.         }
  14.         .box ul {
  15.             margin: 0;
  16.             padding: 0;
  17.         }
  19.         .box .menu li {
  20.             display: inline-block;
  21.         }
  23.         .box .menu li:hover {
  24.             cursor: pointer;
  25.         }
  27.         .box .menu li.active {
  28.             background-color: lightgreen;
  29.         }
  31.         .box .content {
  32.             background-color: lightgreen;
  33.             text-align: center;
  34.             height: 120px;
  35.             width: 100vw;
  36.             display: none;
  37.         }
  39.         .box .content.active {
  40.             display: inline-block;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="box">
  47.         <!-- 1. 标签 -->
  48.         <ul class="menu" onclick="show()">
  49.             <li data-index="1" class="active">内容1</li>
  50.             <li data-index="2">内容2</li>
  51.             <li data-index="3">内容3</li>
  52.             <li data-index="4">内容4</li>
  53.         </ul>
  55.         <!-- 2. 内容 -->
  56.         <div class="container">
  57.             <section class="content active" data-index="1">内容1</section>
  58.             <section class="content" data-index="2">内容2</section>
  59.             <section class="content" data-index="3">内容3</section>
  60.             <section class="content" data-index="4">内容4</section>
  61.         </div>
  62.     </div>
  63.     <script>
  64.         function show() {
  65.             // 事件绑定
  66.             const ul = event.currentTarget;
  68.             // 事件触发者
  69.             const li = event.target;
  71.             // 1. 将原高亮的标签去掉高亮样式,并把当前点击的标签设置为高亮
  72.             [...ul.children].forEach(li => li.classList.remove("active"));
  73.             li.classList.add("active");
  75.             // 2. 根据标签的自定义索引属性来确定应该显示哪个列表
  76.             // const uls = document.querySelectorAll(".content");
  77.             document.querySelectorAll(".content").forEach(li => li.classList.remove("active"));
  79.             // data-index === 左面的标签的data-index
  80.             // const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
  81.             [...document.querySelectorAll(".content")]
  82.             .find(ul => ul.dataset.index === li.dataset.index)
  83.                 .classList.add("active");
  84.             // content.classList.add("active");
  85.         }
  86.     </script>
  87. </body>
  89. </html>
示例图：

2. 经典轮播图案例

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>轮播图</title>
  9.     <style>
  10.         .slider {
  11.             max-width: 750px;
  12.             min-width: 320px;
  13.             margin: auto;
  14.             padding: 0 10px;
  15.         }
  17.         .slider .imgs {
  18.             /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  19.             height: 150px;
  20.         }
  22.         .slider .imgs img {
  23.             /* 图片完全充满父级空间显示 */
  24.             height: 100%;
  25.             width: 100%;
  26.             /* 图片带有圆角 */
  27.             border-radius: 10px;
  28.             /* 默认图片全部隐藏,只有有active的图片才显示 */
  29.             display: none;
  30.         }
  31.         /* 默认显示第一张 */
  33.         .slider .imgs img.active {
  34.             display: block;
  35.         }
  36.         /* 轮播图按钮组 */
  38.         .slider .btns {
  39.             /* 按钮水平一排显示,用flex,且水平居中 */
  40.             display: flex;
  41.             place-content: center;
  42.         }
  44.         .slider .btns span {
  45.             /* 按钮宽高相同,确定显示成一个正圆 */
  46.             width: 8px;
  47.             height: 8px;
  48.             /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  49.             background-color: rgba(255, 255, 255, 0.4);
  50.             /* 50%可确保显示为正圆 */
  51.             border-radius: 50%;
  52.             /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  53.             margin: -12px 3px 5px;
  54.         }
  56.         .slider .btns span.active {
  57.             background-color: #fff;
  58.         }
  59.     </style>
  60. </head>
  62. <body>
  63.     <div class="slider">
  64.         <!-- 图片容器 -->
  65.         <div class="imgs">
  66.             <!-- 轮播图默认从第一张开始显示 -->
  67.             <a href=""><img src="./images/banner1.jpg" alt="" data-index="1" class="active" /></a>
  68.             <a href=""><img src="./images/banner2.jpg" alt="" data-index="2" /></a>
  69.             <a href=""><img src="./images/banner3.png" alt="" data-index="3" /></a>
  70.         </div>
  71.         <!-- 切换按钮数量与图片数量必须一致 -->
  72.         <div class="btns">
  73.             <span data-index="1" class="active" onclick="setActive()"></span>
  74.             <span data-index="2" onclick="setActive()"></span>
  75.             <span data-index="3" onclick="setActive()"></span>
  76.         </div>
  77.     </div>
  79.     <script>
  80.         // 1. 获取全部图片与按钮
  81.         const imgs = document.querySelectorAll(".slider .imgs img");
  82.         const btns = document.querySelectorAll(".slider .btns span");
  84.         // 2. 设置激活状态
  85.         function setActive() {
  86.             // 1. 清空图片所按钮的激活状态
  87.             imgs.forEach(img => img.classList.remove("active"));
  88.             btns.forEach(btn => btn.classList.remove("active"));
  90.             // 2.根据按钮的索引来确定应该将哪一张图片显示出来
  91.             event.target.classList.add("active");
  92.             imgs.forEach(img => {
  93.                 if (img.dataset.index === event.target.dataset.index) {
  94.                     img.classList.add("active");
  95.                 }
  96.             });
  97.         }
  99.         // 3. 定时播放
  100.         // 用到"事件派发器",来自动的模拟手工点击
  101.         setInterval(
  102.             function(arr) {
  103.                 // 使这个数组首尾相接实现无限循环效果
  104.                 let i = arr.shift();
  105.                 btns[i].dispatchEvent(new Event("click"));
  106.                 arr.push(i);
  107.             },
  108.             2000,
  109.             Object.keys(btns)
  110.         );
  111.     </script>
  112. </body>
  114. </html>
Correcting teacher：PHPzPHPz

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