幻灯片指令实现

[alanhe421]

参考资料

• https://github.com/logicbox/jquery-simplyscroll

[alanhe421]

import {AfterViewInit, Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

const ITEM_WIDTH = 200; // 为每一项占据的宽度

/**
 * 赋予内部图片集滚动效果
 */
@Directive({
  selector: '[appSimplyScroll]'
})
export class SimplyScrollDirective implements AfterViewInit {
  intervalId: number;

  constructor(private el: ElementRef, private render: Renderer2) {
    this.render.setStyle(this.el, 'left', `-${ITEM_WIDTH}px`);
  }

  @HostListener('mouseover', ['$event.target']) hovered(element: HTMLElement) {
    if (element.tagName === 'IMG') {
      clearInterval(this.intervalId);
    }
  }

  @HostListener('mouseout', ['$event.target']) outed(element: HTMLElement) {
    if (element.tagName === 'IMG') {
      this.autoStart();
    }
  }

  autoStart() {
    this.intervalId = setInterval(() => {
        let position = this.getCurrentPosition();
        if (position === (-ITEM_WIDTH * 4)) { // 显示宽+初始化位置,显示个数加1
          position = -`${ITEM_WIDTH}`; // 无缝循环
        }
        this.render.setStyle(this.el.nativeElement, 'left', position + 'px');
      }, 50
    );
  }

  ngAfterViewInit() {
    const length = this.el.nativeElement.children.length;
    if (length === 0) {
      return;
    }
    // 头部追加尾元素，尾部追加头元素，确保流畅循环
    const first = this.el.nativeElement.children[0].cloneNode(true);
    const last = this.el.nativeElement.children[length - 1].cloneNode(true);
    this.render.appendChild(this.el.nativeElement, first);
    this.render.insertBefore(this.el.nativeElement, last, this.el.nativeElement.children[0]);
    this.render.setStyle(this.el, 'width', `${ITEM_WIDTH * (length + 2)}px`);
    this.autoStart();
  }

  private getCurrentPosition(): number {
    const currentValue = getComputedStyle(this.el.nativeElement).left;
    return +currentValue.substring(0, currentValue.indexOf('px')) - 1;
  }

}