search

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

选项卡、轮播图实例

赵大叔
赵大叔原创
2022年01月11日 19:38:08549浏览

<!-- 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

上一条：闭包、访问器属性、类与对象的创建和解析、JS浏览器应用下一条：json,XHR,FetchAPI,async,await
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多