js——面向对象之Tab转换及轮播

最新推荐文章于 2023-08-19 18:15:10 发布

FZY927

最新推荐文章于 2023-08-19 18:15:10 发布

阅读量255

点赞数

分类专栏：千峰学员笔记笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/fzy927/article/details/126982135

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

千峰学员笔记

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 常规reset动作 */
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      ul,
      ol,
      li {
        list-style-type: none;
      }

      #box {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 50px auto;

        display: flex;
        flex-direction: column;
      }

      #box > ul {
        width: 100%;
        height: 60px;
        /* background-color: coral; */
        display: flex;
      }

      #box > ul > li {
        /* width: 100%; */
        flex-grow: 1;
        height: 100%;
        background-color: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
      }

      #box > ul > li.active {
        background-color: darkorange;
      }

      #box > ol {
        width: 100%;
        /* height: 50px; */
        flex-grow: 1;
        background-color: burlywood;
        position: relative;
      }

      #box > ol > li {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 50px;
      }

      #box > ol > li.active {
        display: flex;
      }

      button {
        height: 50px;
        margin: 5px;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>

    <!-- MyTab封装 -->
    <script>
      class MyTab {
        constructor(domSelector, { arr, autoPlay, interval }) {
*[HTML]:   this声明函数
          this.domSelector = domSelector;

          /* 接收配置 */
          this.arr = arr;
          this.autoPlay = autoPlay || false;
          this.interval = interval || 1000;
	
          /* 轮播参数 */
          this.currentIndex = 0;
          this.autoTimer = null;
			*[HTML]: 创建实例对象
          this.render();//负责渲染表格出来的实例对象
          this.initListeners();//负责点击事件
			//自动播放绑定开始自动播放
          this.autoPlay && this.startAutoplay();
        }

        render() {
        //拿取样式开始渲染
          this.root = document.querySelector(this.domSelector);
          this.root.innerHTML = `
                <div id="box">
                    <ul></ul>
                    <ol></ol>
                    <button>STOPPED</button>
                </div>                
                `;
	
          this.ul = this.root.querySelector("ul");
          this.ol = this.root.querySelector("ol");
          this.btn = this.root.querySelector("button");

          /* 渲染标签和内容 */
          let ulHtml = "",
            olHtml = "";
          this.arr.forEach(
            // {tab:"a",content:"aContent"},
            // let {tab,content} = item
            //利用声明函数将ulHtml传入tab，olHtml传入conten给其二者赋值写上样式
            ({ tab, content }, index) => {
              ulHtml += `<li index="${index}" class="${
                index ? "" : "active"
              }">${tab}</li>`;
              olHtml += `<li index="${index}" class="${
                index ? "" : "active"
              }">${content}</li>`;
            }
          );

          this.ul.innerHTML = ulHtml;
          this.ol.innerHTML = olHtml;

          /* 找出所有的标签li+内容li */
          this.tabs = Array.from(this.ul.children);
          this.contents = Array.from(this.ol.children);
        }
      
        initListeners() {
          this.ul.addEventListener("click", (e) => {
          //保证直接点击末梢元素
            const eTarget = e.target;
            if (eTarget.nodeName === "LI") {
            //将停止自动轮播方法实例以及选择页面转换与点击事件进行绑定
              this.stopAutoplay();
              //index并不是w3c的属性，所以要拿到它，必须要用getAttribute
              this.switchTab(eTarget.getAttribute("index") * 1);
            }
          });

          this.btn.onclick = (e) =>
            this.autoTimer ? this.stopAutoplay() : this.startAutoplay();
        }
		//index：页面序号，点击那个序号就渲染那个序号的样式
        switchTab(index) {
          this.tabs.forEach((tab) => tab.classList.remove("active"));
          this.contents.forEach((con) => con.classList.remove("active"));

          this.tabs[index].classList.add("active");
          this.contents[index].classList.add("active");
        }
		//开始自动播放，定时器原理
        startAutoplay() {
          if (!this.autoTimer) {
          //
            this.switchTab(this.checkIndex(++this.currentIndex));
            this.autoTimer = setInterval(() => {
              this.switchTab(this.checkIndex(++this.currentIndex));
            }, this.interval);
            this.btn.innerText = "PLAYING";
          }
        }
		//定时器原理
        stopAutoplay() {
          if (this.autoTimer) {
          //清除定时器
            clearInterval(this.autoTimer);
            //把定时器置空
            this.autoTimer = null;
            this.btn.innerText = "STOPPED";
          }
        }
			//矫正轮播范围，在这里，checkindex已经在startAutoplay中，currentindex赋值给n，所以currentindex增加时，n也在增加，实现给n传入实参，进行条件判断
        checkIndex(n) {
          if (n >= this.arr.length) {
          //防止序号3 => 0，越界
    
            this.currentIndex = 0;
          } else if (n < 0) {
            // -1 => 2
            //反方向轮播
            this.currentIndex = this.arr.length - 1;
          } else {
          //按原计划行事
            this.currentIndex = n;
          }
			//返回现在的轮播序号
          return this.currentIndex;
        }
      }
    </script>

    <!-- 测试脚本 -->
    <script>
    //给Mytab传入实参
      new MyTab("#root", {
        arr: [
          { tab: "a", content: "aContent" },
          { tab: "b", content: "bContent" },
          { tab: "c", content: "cContent" },
          { tab: "d", content: "dContent" },
        ],

        // 要不要自动轮播
        autoPlay: false,

        // 轮播时间间隔
        interval: 500,
      });
    </script>
  </body>
</html>