原生js之堆疊卡片輪播圖（另外一種實現方式）

請仔細瞅瞅輪播的示意圖：

html代碼：javascript

<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代碼：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代碼html

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。因此我仍是本身搞一個吧。java

在此以前我也想過一些其餘的，可是感受實現起來確實有點困難，我也作過普通的輪播圖，只是修改用一個left值就行，而此次針對這個堆疊卡片的輪播圖，仍是比較麻煩的。
忽然想到了這種方式來實現。各位能夠參考一下。jquery

原理：
每個li標籤都對應着一個class，運行時，就修改每個li標籤的class，就能夠達到效果了。而後把每個li標籤所對應的class都放在一個數組中。而後對這個數組進行排序，怎麼排序呢？若是向左運動，刪除數組中的最後一個，並把這個值添加到這個數組中的頭部。web

你們能夠參考下哦。但願能幫助大家！數組