search

博客列表 >轮播图和选项卡

轮播图和选项卡

秋闲独醉
秋闲独醉原创
2022年08月01日 19:20:02368浏览

轮播图

  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.       }
  14.       .silder {
  15.         width: 400px;
  16.         margin: 10px auto;
  17.       }
  18.       .images img {
  19.         width: 100%;
  20.         display: none;
  21.       }
  22.       .images img.active {
  23.         display: block;
  24.       }
  25.       .btns {
  26.         display: flex;
  27.         place-content: center;
  28.       }
  29.       .btns span {
  30.         width: 10px;
  31.         height: 10px;
  32.         border-radius: 50%;
  33.         background-color: gray;
  34.         margin: -20px 5px 5px;
  35.       }
  36.       .btns span.active {
  37.         background-color: yellow;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="silder">
  43.       <div class="images"></div>
  44.       <div class="btns"></div>
  45.     </div>
  46.     <script>
  47.       // 3. 在页面初始化时,自动加载以上内容,事件是 load
  48.       window.addEventListener("load", fun, false);
  49.       let imageArr = ["banner-1.jpg", "banner-2.jpg", "banner-3.jpg", "banner-4.jpg"];
  50.       const images = document.querySelector(".silder .images");
  51.       const btns = document.querySelector(".btns");
  52.       function fun() {
  53.         imageArr.forEach(function (item, index) {
  54.           if (index == 0) {
  55.             // 1. 将所有图片放在一个数组中, 并动态添加到页面中
  56.             images.insertAdjacentHTML("beforeend", `<a href="#"><img src="./images/${item}" alt=" " class="active" data-index=${index}></a>`);
  57.             // 2. 根据图片数量,动态创建按钮组,并动态添加到页面中
  58.             btns.insertAdjacentHTML("beforeend", `<span class="active" data-index="${index}"></span>`);
  59.           } else {
  60.             // 1. 将所有图片放在一个数组中, 并动态添加到页面中
  61.             images.insertAdjacentHTML("beforeend", `<a href="#"><img src="./images/${item}" alt=" " data-index=${index}></a>`);
  62.             // 2. 根据图片数量,动态创建按钮组,并动态添加到页面中
  63.             btns.insertAdjacentHTML("beforeend", `<span  data-index="${index}"></span>`);
  64.           }
  65.         });
  66.         // console.log(document.body);
  67.         // console.log(imageArr);
  68.         const imgs = document.querySelectorAll(".silder .images img");
  69.         const btns2 = document.querySelectorAll(".silder .btns span");
  70.         btns.addEventListener("click", fun2, false);
  71.         // console.log(imgs, btns2);
  72.         function fun2() {
  73.           //   console.log(event.target);
  74.           btns2.forEach(function (item) {
  75.             item.classList.remove("active");
  76.           });
  77.           //   console.log(event.target);
  78.           //   console.log(event.currentTarget);
  79.           imgs.forEach((item) => item.classList.remove("active"));
  80.           event.target.classList.add("active");
  81.           //   console.log(event.target.dataset.index);
  82.           //   console.log(imgs);
  83.           imgs.forEach((item) => {
  84.             // console.log(item.dataset.index);
  85.             if (item.dataset.index === event.target.dataset.index) {
  86.               item.classList.add("active");
  87.             }
  88.           });
  89.         }
  90.         // 4. [选做]: 为轮播图添加翻页按钮,提供翻页功能,提示:参考定时播放
  91.         setInterval(
  92.           function (arr) {
  93.             // console.log(arr);
  94.             let index = arr.shift();
  95.             // btns2[index].dispatchEvent(new Event("click"));
  96.             btns2[index].click();
  97.             arr.push(index);
  98.             // console.log(arr);
  99.           },
  100.           3000,
  101.           Object.keys(btns2)
  102.         );
  103.       }
  104.     </script>
  105.     <script>
  106.       // 6. 任选5个课程上没讲过的数组方法,实例演示
  107.       let arr1 = [3, 4, 1, 5];
  108.       let arr2 = [9, 3, 4, 1];
  109.       console.log("concat() 连接两个或多个数组：" + arr1.concat(arr2));
  110.       const obj = arr1.entries();
  111.       console.log("entries()返回一个新的 Array Iterator 对象:" + obj.next().value);
  112.       //arr.fill(value[, start[, end]]),会修改原数组
  113.       console.log(arr1.fill(9));
  114.       console.log(arr1.fill(8, 2));
  115.       console.log(arr1.fill(7, 1, 3));
  116.       //arr.includes(valueToFind[, fromIndex])
  117.       console.log(arr2.includes(4));
  118.       console.log(arr2.includes(3, 2));
  119.       //arr.reverse() 返回颠倒后的数组
  120.       console.log(arr2.reverse());
  121.       //arr.keys 返回数组的键组成的Array Iterator对象。
  122.       const iterator = arr2.keys();
  123.       for (const key of iterator) {
  124.         console.log(key);
  125.       }
  126.     </script>
  127.   </body>
  128. </html>

仿写php中文网编程词典选项卡

  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>// 5. 仿写php中文网编程词典选项卡</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body > div {
  15.         width: 400px;
  16.         margin-top: 20px;
  17.         /* display: grid; */
  18.         /* place-content: center; */
  19.       }
  20.       .list {
  21.         display: grid;
  22.         grid-template-columns: repeat(3, 100px);
  23.         grid-auto-rows: 40px;
  24.         place-content: space-evenly;
  25.         place-items: center;
  26.         font-size: large;
  27.         margin: auto;
  28.       }
  29.       .list .btn {
  30.         background-color: green;
  31.         width: 80px;
  32.         height: 30px;
  33.         text-align: center;
  34.         border-radius: 10px;
  35.       }
  36.       .list .active {
  37.         background-color: purple;
  38.         cursor: pointer;
  39.       }
  40.       .list .active:hover,
  41.       .content .item:hover {
  42.         cursor: pointer;
  43.       }
  44.       .content {
  45.         width: 350px;
  46.         height: 300px;
  47.         position: fixed;
  48.         top: 70px;
  49.         left: 25px;
  50.       }
  51.       .content .item {
  52.         width: 350px;
  53.         height: 300px;
  54.         text-align: center;
  55.         display: none;
  56.       }
  57.       .item.active {
  58.         display: block;
  59.       }
  60.       .content div:first-of-type {
  61.         background-color: red;
  62.       }
  63.       .content div:nth-of-type(2) {
  64.         background-color: yellow;
  65.       }
  66.       .content div:last-of-type {
  67.         background-color: orange;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <div>
  73.       <div class="list">
  74.         <div class="btn active" data-index="1">按钮1</div>
  75.         <div class="btn" data-index="2">按钮2</div>
  76.         <div class="btn" data-index="3">按钮3</div>
  77.       </div>
  78.       <div class="content">
  79.         <div class="item active" data-index="1">内容1</div>
  80.         <div class="item" data-index="2">内容2</div>
  81.         <div class="item" data-index="3">内容3</div>
  82.       </div>
  83.     </div>
  84.     <script>
  85.       //   const list = document.querySelector(".list");
  86.       const lists = document.querySelectorAll(".list .btn");
  87.       //   console.log(lists);
  88.       const contents = document.querySelectorAll(".content .item");
  89.       //   console.log(contents);
  90.       lists.forEach((item, index) => item.addEventListener("click", fun, false));
  92.       function fun() {
  93.         lists.forEach((item, index) => item.classList.remove("active"));
  94.         event.currentTarget.classList.add("active");
  95.         contents.forEach((item, index) => item.classList.remove("active"));
  96.         contents.forEach((item, index) => {
  97.           if (item.dataset.index == event.currentTarget.dataset.index) {
  98.             item.classList.add("active");
  99.           }
  100.         });
  101.       }
  102.     </script>
  103.   </body>
  104. </html>
上一条：迁移学习(Transfer Learning)核心技术 开发下一条：购物车JS代码
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多