投屏展現（輪播實現）

實現思路：HTML+CSS+JS

佈局HTML：小盒子裏面套大盒子，大盒子在小盒子裏面能夠滾動

小盒子（scrollBox）：視覺看到滾動的區域---固定的區域。大盒子（contentBox）：裝載內容的盒子----設置relative。

CSS：scrollBox：height：800px; overflow: hidden;

           contentBox: position: relative;　　 margin-top： 動態計算

Js: 總內容的高度、一次滾動的高度、滾動的頻率、滾動的次數、滾動與不滾動的時機、動態設置可滾動盒子的margin-top的值

     總內容的高度：1005px;

　  一次滾動：400px;

     需滾動的次數 ：1000/400  須要滾動三次   向上取整

     margin-top：初始值爲0

     滾動的index：初始值爲0

     不需再次滾動： index  >=總內容高度/ 一次滾動的高度   

     滾動一次： index=index+1   margin-top: -400*index+初始值

     margin-top：從新賦值

timer () {  // 獲取內容的高度
  const queryDom = document.querySelector('#tableBox');
  const tableHeight = queryDom.offsetHeight;
  let marginTop;  // 滾動一次 index+1
  const newActiveIndex = this.activeIndex + 1;  // 滾動的index > 需滾動的次數 或者是 滾動到離底部還有30px的時候 中止滾動
  if (this.activeIndex >= Math.floor(tableHeight / 400 ) || （(tableHeight + this.initMarginTop) < this.maskHeight - 30）) {
    this.activeIndex = 0;
    this.initMarginTop = 0 ;
    return;
    }  
  // 滾動一次 marginTop的值
    this.initMarginTop = - newActiveIndex * 400;
    this.activeIndex = newActiveIndex ;
}