投屏展示（轮播实现）

实现思路：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 ;
}