angular 横向自滚动（滚动广告效果）

一、实际效果图

二、实现原理：

原理：每一次的滚动都是在其setInterval（）定时器的作用下，每次将DOM.scrollLeft++

三、代码实现：

.html 代码如下：

<div class="Qbody">
    <div id="parent" class="parent">
        <div id="child1" class="child">
            <div *ngFor="let data of listOfDatas;index as i">
                <div [class]="'tabletBody'+i">{{data.title}}</div>
            </div>
        </div>
        <div id="child2" class="child"></div>
    </div>
</div>

.css 代码如下：

.Qbody {
  padding: 100px;
  //内容层
  .parent {
    width: 600px; //多宽出现滚动
    margin: auto 0;
    overflow-x: hidden;
    .child {
      /*设置的子盒子高度大于父盒子，产生溢出效果*/
      white-space: nowrap;
      div {
        display:inline;
        .tabletBody0 {
          background: #acf31e;
          font-size: 16px;
        }
        .tabletBody1 {
          background: #9e6e6e;
          font-size: 16px;
        }
        .tabletBody2 {
          background: #17df81;
          font-size: 16px;
        }
      }
    }
  }
}

.ts 代码如下：

ngOnInit(): void {
    var parent = document.getElementById('parent');
    var child1 = document.getElementById('child1');
    var child2 = document.getElementById('child2');
    child2.innerHTML = child1.innerHTML;
    this.mysetInterval = setInterval(function () {
      if (child2.offsetWidth - parent.scrollLeft <= 0) {
        parent.scrollLeft -= child1.offsetWidth;
      } else {
        parent.scrollLeft++;
      }
    }, 50);
  }
  mysetInterval
  ngOnDestroy() {//每当 Angular 每次销毁指令/组件之前调用并清扫
    clearInterval(this.mysetInterval)//关闭循环
  }