原生js之堆叠卡片轮播图（另一种实现方式）

请仔细瞅瞅轮播的示意图：

html代码：

        <div class="banner-card">
            <ul class="ul">
                <li><img src="https://pic1.zhimg.com/50/v2-20a59add40a4123c0efe706f955e5711_200x0.webp" alt=""></li>
                <li><img src="https://pic1.zhimg.com/50/v2-c22a0b174d8a0206a1909aad3b20c5bd_200x0.webp" alt=""></li>
                <li><img src="https://pic1.zhimg.com/50/v2-c6c0dc2dd05364cad12659fca76c82d4_200x0.webp" alt=""></li>
                <li><img src="https://pic1.zhimg.com/50/v2-294aabeae683f39dc72a5599b22851a5_200x0.webp" alt=""></li>
                <li><img src="https://pic1.zhimg.com/50/v2-fd1c3adacf0bb3660a3e6f2d62e3cc04_200x0.webp" alt=""></li>
            </ul>
            <div class="left-btn">
                <span><</span>
            </div>
            <div class="right-btn">
                <span>></span>
            </div>
        </div>

css代码：

.banner-card {
	width: 100%;
    height: 250px;
    line-height: 250px;
    background: #ffffff;
    position: relative;
}
.banner-card ul {
	width: 700px;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.banner-card li {
   width: 150px;
   height: 200px;
   position: absolute;
   top: 25px;
   list-style-type: none;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
   cursor: pointer;
}
.banner-card li img {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.one {
    z-index: 1;
    left: 75px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.two {
    z-index: 2;
    left: 175px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
.three {
    left: 275px;
    z-index: 3;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.four {
   z-index: 2;
   left: 375px;
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
   -ms-transform: scale(0.9);
   -o-transform: scale(0.9);
   transform: scale(0.9);
}
.five {
   left: 475px;
   z-index: 1;
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   -ms-transform: scale(0.8);
   -o-transform: scale(0.8);
   transform: scale(0.8);
}

.banner-card div {
	transition: 0.3s;
	position: absolute;
	top: 0;
	cursor: pointer;
	opacity: 0;
}
.banner-card div span {
   display: inline-block;
   font-size: 25px;
}

.left-btn {
   left: 20px;
}
.right-btn {
   right: 20px;
}

js代码

class bannerCard {
  constructor(options) {
    // 存储默认值
    this.default = {
      classArray: ['one', 'two', 'three', 'four', 'five'],
      leftSlider: true,
    };
    // options覆盖默认值
    Object.assign(this.default, options);

    this.bannerWrap = document.getElementsByClassName('banner-card')[0];
    this.lis = this.bannerWrap.getElementsByTagName('li');
    this.time = null;
    // 将类数组转化为数组（ES6用法）
    this.lisArray = Array.from(this.lis);
    this.classlist = this.default.classArray;
    this.leftSlider = this.default.leftSlider;
    this.leftBtn = document.getElementsByClassName('left-btn')[0];
    this.rightBtn = document.getElementsByClassName('right-btn')[0];

    this.init();
  }
  init() {
    // li的class进行初始化操作
    this.initLiClass();
    this.startTimer();

    // 鼠标移入移出
    this.listenMouseEvent();
    // 鼠标点击按钮事件
    this.listenMouseClickBtnEvent();
  }

  // 开始定时器
  startTimer() {
    this.timer()
  }

  // 清除定时器
  clearTimer() {
    clearInterval(this.time)
  }

  // li的class进行初始化操作
  initLiClass() {
    this.move(this.classlist)
  }

  // 定时器
  timer() {
    let self = this;
    if(self.leftSlider) {
      self.time = setInterval(self.leftMove.bind(this), 2000)
    }else {
      self.time = setInterval(self.rightMove.bind(this), 2000)
    }
  }

  // 运动函数
  move(list) {
    let self = this;
    self.lisArray.forEach((value, index) => {
      value.setAttribute('class', list[index])
    })
  }

  // 向左运动
  leftMove() {
    let self = this;
    let popValue = self.classlist.pop();
    self.classlist.unshift(popValue);
    self.move(self.classlist);
  }

  // 向右运动
  rightMove() {
    let self = this;
    let shiftValue = self.classlist.shift();
    self.classlist.push(shiftValue);
    self.move(self.classlist)
  }

  /*
   *  下边是鼠标的操作
   */
  // 监听鼠标移入移出事件
  listenMouseEvent() {
    let self = this;
    // 添加鼠标移入触发事件
    self.bannerWrap.addEventListener('mouseover', () => {
      self.clearTimer();
      self.leftBtn.style.cssText = `left: 60px; opacity: 1`;
      self.rightBtn.style.cssText = `right: 60px; opacity: 1`
    });
    // 添加鼠标移出触发事件
    self.bannerWrap.addEventListener('mouseout', () => {
      self.startTimer();
      self.leftBtn.style.cssText = `left: 20px; opacity: 0`;
      self.rightBtn.style.cssText = `right: 20px; opacity: 0`;
    })
  }

  // 鼠标点击左右按钮事件
  listenMouseClickBtnEvent() {
    let self = this;
    // 左点击事件
    self.leftBtn.addEventListener('click', () => {
      self.leftMove();
    });

    //右点击事件
    self.rightBtn.addEventListener('click', () => {
      self.rightMove();
    })
  }
}

// 可传入一个对象， 对象属性包含classArray: 一个数组。leftSlider: 布尔值
new bannerCard();

在此之前：我也在网上找了一些，然而我的项目不使用jquery，都是原生的js。网上大部分都是jquery。所以我还是自己搞一个吧。

在此之前我也想过一些其他的，但是感觉实现起来确实有点困难，我也做过普通的轮播图，只是修改用一个left值就行，而这次针对这个堆叠卡片的轮播图，还是比较麻烦的。
突然想到了这种方式来实现。各位可以参考一下。

原理：
每一个li标签都对应着一个class，运行时，就修改每一个li标签的class，就可以达到效果了。然后把每一个li标签所对应的class都放在一个数组中。然后对这个数组进行排序，怎么排序呢？如果向左运动，删除数组中的最后一个，并把这个值添加到这个数组中的头部。

大家可以参考下哦。希望能帮助你们！