Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选项卡、轮播图实例
Blogger Information
Blog 119
fans 3
comment 1
visits 94611
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
选项卡、轮播图实例
赵大叔
Original
550 people have browsed it

<!-- 1. 实例演示选项卡 2. 完成购物车的选择计算功能(选做) 3. 完成经典轮播图案例 -->

选项卡实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>JS选项卡实例</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       .container {
  16.         width: 28em;
  17.         height: 18em;
  18.         display: flex;
  19.         flex-direction: column;
  20.         margin: auto;
  21.         background-color: #eef5d2;
  22.       }
  23.       .container > div {
  24.         margin-top: 1.125rem;
  25.         background-color: #fff;
  26.         display: grid;
  27.         grid-template-columns: repeat(3, 8rem);
  28.         justify-content: center;
  29.         gap: 1.5rem;
  30.       }
  31.       .container > div > span {
  32.         margin-right: 1.125rem;
  33.       }
  34.       .container > div > span:nth-of-type(2) {
  35.         background-color: #dfa1fc;
  36.       }
  38.       .container .content {
  39.         display: none;
  40.       }
  41.       .container .content.active {
  42.         display: grid;
  43.         grid-template-columns: repeat(3, 8rem);
  44.         justify-content: center;
  45.         gap: 1.5rem;
  46.       }
  47.       .container .menu button.active {
  48.         background-color: #8bf8ea;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <!-- 1. 标签 -->
  55.       <div class="menu" onclick="show()">
  56.         <button type="button" data-index="1" class="active">手机</button>
  57.         <button type="button" data-index="2">平板</button>
  58.         <button type="button" data-index="3">电脑</button>
  59.       </div>
  61.       <!-- 2. 内容 -->
  62.       <div class="content active" data-index="1">
  63.         <span><a href="">iphone11</a></span>
  64.         <span><a href="">iphone12</a></span>
  65.         <span><a href="">iphone13</a></span>
  66.       </div>
  68.       <div class="content" data-index="2">
  69.         <span><a href="">iPad mini</a></span>
  70.         <span><a href="">iPad mini</a></span>
  71.         <span><a href="">iPad mini</a></span>
  72.       </div>
  74.       <div class="content" data-index="3">
  75.         <span><a href="">MacBook Air</a></span>
  76.         <span><a href="">MacBook Pro</a></span>
  77.         <span><a href="">MacBook Pro 2022</a></span>
  78.       </div>
  79.     </div>
  80.     <script>
  81.       function show() {
  82.         // 1. 将原高亮的标签去掉高亮样式,并把当前点击的标签设置为高亮
  83.         [...event.currentTarget.children].forEach((span) =>
  84.           span.classList.remove("active")
  85.         );
  86.         event.target.classList.add("active");
  88.         // 2. 根据标签的自定义索引属性来确定应该显示哪个列表
  89.         // const uls = document.querySelectorAll(".content");
  90.         document
  91.           .querySelectorAll(".content")
  92.           .forEach((span) => span.classList.remove("active"));
  94.         // data-index === 左面的标签的data-index
  95.         // const content = [...uls].find(ul => ul.dataset.index === li.dataset.index);
  96.         [...document.querySelectorAll(".content")]
  97.           .find((div) => div.dataset.index === event.target.dataset.index)
  98.           .classList.add("active");
  99.         // content.classList.add("active");
  100.       }
  101.     </script>
  102.   </body>
  103. </html>

http://help10086.cn/%E9%80%89%E9%A1%B9%E5%8D%A1%E3%80%81%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%AE%9E%E4%BE%8B/demo1.html

轮播图实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图实例</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       .swiper {
  16.         width: 1226px;
  17.         height: 460px;
  18.         margin: 0 auto;
  19.         position: relative;
  20.       }
  21.       .swiper > .imgList {
  22.         width: 100%;
  23.         height: 100%;
  24.         position: relative;
  25.       }
  27.       .swiper > .imgList > .imgItem {
  28.         width: 100%;
  29.         height: 100%;
  30.         background-size: 100% 100%;
  31.         position: absolute;
  32.         left: 0;
  33.         top: 0;
  34.         opacity: 0;
  35.         transition: all 0.5s;
  36.       }
  38.       .swiper > .imgList > .imgItem.active {
  39.         opacity: 1;
  40.       }
  41.       .swiper .btn.pre {
  42.         width: 80px;
  43.         height: 60px;
  44.         line-height: 60px;
  45.         text-align: center;
  46.         background-color: #00000099;
  47.         color: #fff;
  49.         position: absolute;
  50.         top: calc(50% - 30px);
  51.         font-size: 30px;
  52.       }
  54.       .swiper .btn.next {
  55.         width: 80px;
  56.         height: 60px;
  57.         line-height: 60px;
  58.         text-align: center;
  59.         background-color: #00000099;
  60.         color: #fff;
  62.         position: absolute;
  63.         top: calc(50% - 30px);
  64.         right: 0;
  65.         font-size: 30px;
  66.       }
  68.       /* 设置4个小圆 */
  69.       .swiper > .circleList {
  70.         width: 100%;
  71.         height: 80px;
  72.         display: flex;
  73.         padding: 0 30px;
  74.         justify-content: flex-end;
  75.         align-items: center;
  76.         position: absolute;
  77.         left: 0;
  78.         bottom: 0;
  79.       }
  81.       .swiper > .circleList > .circleItem {
  82.         width: 10px;
  83.         height: 10px;
  84.         border: 2px solid #999;
  85.         background-color: #666;
  86.         border-radius: 5px;
  87.         margin: 0 3px;
  88.       }
  90.       /* 第一个圆默认，填充颜色  */
  91.       .swiper > .circleList > .circleItem.active {
  92.         background-color: #ccc;
  93.         border: 2px solid #666;
  94.       }
  95.     </style>
  96.   </head>
  97.   <body>
  98.     <div class="swiper">
  99.       <div class="imgList">
  100.         <img class="imgItem active" src="images/img_1.jpg" alt="" />
  101.         <img class="imgItem" src="images/img_1.jpg" alt="" />
  102.         <img class="imgItem" src="images/img_2.jpg" alt="" />
  103.         <img class="imgItem" src="images/img_3.jpg" alt="" />
  104.         <img class="imgItem" src="images/img_4.jpg" alt="" />
  105.         <img class="imgItem" src="images/img_5.jpg" alt="" />
  106.       </div>
  108.       <div class="btnList">
  109.         <div class="btn pre"><</div>
  110.         <div class="btn next">></div>
  111.       </div>
  113.       <!-- 4个小圆形 -->
  114.       <div class="circleList">
  115.         <div id="c0" class="circleItem active"></div>
  116.         <div id="c1" class="circleItem"></div>
  117.         <div id="c2" class="circleItem"></div>
  118.         <div id="c3" class="circleItem"></div>
  119.         <div id="c4" class="circleItem"></div>
  120.       </div>
  121.     </div>
  123.     <script type="text/javascript">
  124.       /* 按钮（上） */
  125.       let preBtn = document.querySelector(".swiper .pre");
  126.       /* 按钮（下） */
  127.       let nextBtn = document.querySelector(".swiper .next");
  128.       /* 图片列表 */
  129.       let imgListDivs = document.querySelectorAll(".swiper .imgItem");
  130.       /* 圆点列表 */
  131.       let circleDivs = document.querySelectorAll(".swiper .circleItem");
  133.       let currentImg = 0; /* 记录当前位置*/
  135.       console.log(imgListDivs);
  137.       //下一张图
  138.       nextBtn.onclick = function () {
  139.         currentImg = currentImg + 1;
  140.         if (currentImg >= imgListDivs.length) {
  141.           currentImg = 0;
  142.         }
  143.         renderNumImg();
  144.       };
  146.       //上一张图
  147.       preBtn.onclick = function () {
  148.         currentImg = currentImg - 1;
  149.         if (currentImg < 0) {
  150.           currentImg = imgListDivs.length - 1;
  151.         }
  152.         renderNumImg();
  153.       };
  155.       function renderNumImg() {
  156.         //初始化，将所有的img列表的activ去掉
  157.         imgListDivs.forEach(function (item, i) {
  158.           item.classList.remove("active");
  159.         });
  161.         //去掉小圆
  162.         circleDivs.forEach(function (item, i) {
  163.           item.classList.remove("active"); /* 移除*/
  164.         });
  166.         //圆点跟着，切换（添加）
  167.         imgListDivs[currentImg].classList.add("active");
  168.         circleDivs[currentImg].classList.add("active");
  170.         //设置点小圆，图片也跟着同步
  171.         circleDivs.forEach(function (item, i) {
  172.           console.log(item);
  173.           item.onclick = function () {
  174.             currentImg = i; //把当前的的位置给currentImg
  175.             console.log(i);
  176.             renderNumImg(); //再调用函数
  177.           };
  178.         });
  179.       }
  180.     </script>
  181.   </body>
  182. </html>

http://help10086.cn/%E9%80%89%E9%A1%B9%E5%8D%A1%E3%80%81%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%AE%9E%E4%BE%8B/demo3.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