原生js封裝輪播圖

作業原因，好久沒更新博客了，今天來個用原生js寫輪播圖， 上代碼

class Banner {
  constructor(props = {}) {
    if (!(props?.root instanceof HTMLElement)) {
      throw "root是必選dom節點";
    }
    // 狀態
    this.state = {};
    // 引數
    this.props = {
      type: "move",
      height: 600,
      width: 1000,
      imgs: [],
      ...props,
    };
    if (props.type === "move") {
      this.imgIndex = props.startIndex ? props.startIndex + 1 : 1;
    } else {
      this.imgIndex = props.startIndex || 0;
    }
    this.autoTimer; //自動輪播計時器
    this.animateTimer; //影片計時器
    this.init();
  }

  // 修改狀態
  setState = (state = {}) => {
    this.state = {
      ...this.state,
      ...state,
    };
  };

  // 初始化
  init = () => {
    this.render();
    this.animate();
    this.autoMove();
    this.onChange();
  };
  // 渲染輪播圖
  render = () => {
    const {
      root,
      height,
      width,
      type,
      imgs = [],
      showButton = true,
      showCheck = true,
    } = this.props;
    setStyle(root, {
      height,
      width,
      position: "relative",
    });
    root.className += " banner";
    const box = document.createElement("div");
    const imgBox = document.createElement("ul");
    const iconBox = document.createElement("ul");

    imgs.forEach((item) => {
      this.setImgNode(imgBox, item);
      const icon = document.createElement("li");
      iconBox.appendChild(icon);
    });
    // 滾動需要前后各插入圖片
    if (type === "move") {
      this.setImgNode(imgBox, imgs[0]);
      this.setImgNode(imgBox, imgBox.children[0], imgs[imgs.length - 1]);
    } else {
      setStyle(imgBox.children[this.imgIndex], {
        zIndex: 90,
        opacity: 1,
      });
    }

    setStyle(imgBox, {
      width: type === "move" ? (imgs.length + 2) * width : width,
      height,
    });
    addClass(
      box,
      type === "move" ? "banner-img-box-move" : "banner-img-box-transparency"
    );
    iconBox.className = "banner-icon-box";

    box.appendChild(imgBox);
    root.appendChild(box);
    showCheck && root.appendChild(iconBox);
    showButton && this.renderButton(root);
    this.setState({
      box,
      imgBox,
      iconBox,
    });
  };

  // 渲染按鈕
  renderButton = (node) => {
    const rightBtn = document.createElement("button");
    const leftBtn = document.createElement("button");
    rightBtn.innerHTML = ">";
    leftBtn.innerHTML = "<";
    rightBtn.className = "btn banner-right-btn";
    leftBtn.className = "btn banner-left-btn";

    node.appendChild(rightBtn);
    node.appendChild(leftBtn);
    this.setState({
      rightBtn,
      leftBtn,
    });
  };

  // 設定圖片函式
  setImgNode(node) {
    const { height, width, type } = this.props;
    const li = document.createElement("li");
    li.innerHTML = `<img class="banner-img" src="${
      arguments.length > 2 ? arguments[2] : arguments[1]
    }" />`;
    setStyle(li, {
      height,
      width,
      opacity: type === "move" ? null : 0,
    });
    node.insertBefore(li, arguments.length > 2 ? arguments[1] || null : null);
  }

  //自動輪播
  autoMove = () => {
    const { time = 3000 } = this.props;
    this.autoTimer = setInterval(() => {
      this.imgIndex++;
      this.animate();
    }, time);
  };

  //影片
  animate = () => {
    const { type } = this.props;
    const { iconBox } = this.state;
    //dom集合轉陣列
    Array.from(iconBox.children).forEach((node, index) => {
      if (node.className?.indexOf("active") > -1) {
        removeClassName(node, "active");
      }
      if (this.imgIndex === (type === "move" ? index + 1 : index)) {
        addClass(node, "active");
      }
    });
    if (type === "move") {
      this.move();
    } else {
      this.transparency();
    }
  };
  //滾動輪播
  move = () => {
    const { iconBox, box } = this.state;
    const { imgs, width } = this.props;

    // 下標等于圖片長度時需要重置到第一個小圓點
    if (this.imgIndex === imgs.length + 1) {
      addClass(iconBox.children[0], "active");
    }
    // 圖片超過長度拉回第二張圖片
    if (this.imgIndex === imgs.length + 2) {
      this.imgIndex = 2;
      box.scrollLeft = width;
      addClass(iconBox.children[1], "active");
    }

    if (this.imgIndex === 0) {
      addClass(iconBox.children[imgs.length - 1], "active");
    }

    //下標小于0時回傳最后二張圖片的下標
    if (this.imgIndex < 0) {
      this.imgIndex = imgs.length - 1;
      box.scrollLeft = width * imgs.length;
      addClass(iconBox.children[imgs.length - 2], "active");
    }
    //滾動條移動
    this.scrollMove();
  };

  //淡入淡出
  transparency = () => {
    const { imgBox, iconBox } = this.state;
    const { imgs } = this.props;
    if (this.imgIndex === imgs.length) {
      //下標到最后一張圖片時變回第一張圖片

      this.imgIndex = 0;
      addClass(iconBox.children[0], "active");
    }
    if (this.imgIndex < 0) {
      
      this.imgIndex = imgs.length - 1;
      addClass(iconBox.children[imgs.length - 1], "active");
    }
    Array.from(imgBox.children).forEach((item, index) => {
      this.opacitySwitch(item, 0);
      item.style.zIndex = 0;
    })
    this.opacitySwitch(imgBox.children[this.imgIndex], 100);
    imgBox.children[this.imgIndex].style.zIndex = 90;
  };

  // 所有操作函式
  onChange = () => {
    const { iconBox } = this.state;
    const { root, type } = this.props;
    iconBox.onmouseover = (e) => {
      if (e.target.nodeName !== "LI") return;
      clearInterval(this.autoTimer);
      const index = [].indexOf.call(e.target.parentNode.children, e.target);
      this.imgIndex = type === "move" ? index + 1 : index;
      this.animate();
      this.autoMove(); //重新啟動
    };
    root.onclick = (e) => {
      if (e.target.className?.indexOf("banner-right-btn") > -1) {
        clearInterval(this.autoTimer);
        this.imgIndex++;
        this.animate();
        this.autoMove();
      } else if (e.target.className?.indexOf("banner-left-btn") > -1) {
        clearInterval(this.autoTimer);
        this.imgIndex--;
        this.animate();
        this.autoMove();
      }
    };
  };

  //透明度切換
  opacitySwitch = (ele, target) => {
    let num = 10;
    clearInterval(this.animateTimer);
    this.animateTimer = setInterval(() => {

      let speed = target > num ? 5 : -5;
      //剩余可運動量 <= 每次所走的量
      if (Math.abs(target - num) <= Math.abs(speed)) {
        clearInterval(this.animateTimer); //結束運動
        ele.style.opacity = target / 100; //到達終點
      } else {
        num += speed;
        ele.style.opacity = num / 100;
      }
    }, 30);
  };

  //滾動條移動
  scrollMove() {
    const { box, imgBox } = this.state;
    const { width } = this.props;
    clearInterval(this.animateTimer); //清除計算器
    let minStep = 0; //起始步數
    let maxStep = 20; //最大步數
    let start = box.scrollLeft; //運動起始位置
    let end = this.imgIndex * width; //結束位置
    let everyStep = (end - start) / maxStep; //每一步的距離
    this.animateTimer = setInterval(() => {
      minStep++;
      if (minStep >= maxStep) {
        //判斷到達最大步數
        clearInterval(this.animateTimer); //清除計算器
      }
      start += everyStep; //起始位置加上走的距離
      box.scrollLeft = start;
    }, 20);
  }
}

// 設定css
function setStyle(root, style = {}) {
  Object.keys(style).forEach(
    (item) => (root.style[item] = getStyleValue(item, style[item]))
  );
}
// 特殊處理設定寬高樣式 數字
function getStyleValue(key = "", value) {
  const arr = ["height", "width", "top", "left", "right", "bottom", "border"];
  return arr.indexOf(key.toLowerCase()) > -1 &&
    value !== 0 &&
    value &&
    !isNaN(value)
    ? value + "px"
    : value;
}
// 增加類名
function addClass(ele, value) {
  if (!ele.className) {
    ele.className = value;
  } else {
    newClassName = ele.className;
    newClassName += " ";
    newClassName += value;
    ele.className = newClassName;
  }
}

// 洗掉class函式
function removeClassName(ele, className) {
  let str = ele.className,
    index = str.indexOf(className);
  if (index > -1) {
    ele.className = str.replace(className, "");
  }
}

css 部分寫的稍微簡陋一些

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.banner {
  position: relative;
}
.banner-img-box-move {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
}
.banner-img-box-move > ul > li > img {
  height: 100%;
  width: 100%;
}
.banner-img-box-move > ul > li {
  float: left;
}
.banner-icon-box {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
}
.banner-icon-box > li {
  height: 15px;
  width: 15px;
  margin-right: 12px;
  background-color: #eee;
  border-radius: 50%;
}
.banner-img-box-transparency {
  position: relative;
}
.banner-img-box-transparency > ul > li {
  position: absolute;
  left: 0;
  top: 0;
}
.banner-img-box-transparency> ul > li >img{
  height: 100%;
  width: 100%;
}
.btn {
  position: absolute;
  height: 40px;
  width: 40px;
  z-index: 99;
}
.banner-left-btn {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.banner-right-btn {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.active {
  background-color: red !important;
}

使用

<script>

const imgs = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg',]

const root = document.querySelector('#root');
new Banner({
    imgs,
    root,
    type: 'transparency', //move是滾動輪播， transparency是透明度
    width: 1000,
    height: 400,
})
</script>