angular - 角度 8 中的自动图像滑块（自定义和简单：2019 年 12 月）

Question

示例图像

我想使用打字稿创建自动图像滑块，最终结果应该像这个链接Automatic Slideshow - W3Schools。

标签： angular

Answer 1

是的，我花了 3 个小时后找到了解决方案。

1/ 组件.ts

    gOnInit() {
    this.Repeat();
  }

  Repeat() {
    setTimeout(() => {
      this.__FunctionSlide();
      this.Repeat();
    }, 2000);
  }

  __FunctionSlide() {
    const slides = Array.from(document.getElementsByClassName('mall-show-slide'));
    if (slides === []) {
      this.Repeat();
    }
    for (const x of slides) {
      const y = x as HTMLElement;
      y.style.display = 'none';
    }
    if (this.startIndex > slides.length - 1) {
      this.startIndex = 0;
      const slide = slides[this.startIndex] as HTMLElement;
      slide.style.display = 'block';
      this.startIndex++;
    } else {

      const slide = slides[this.startIndex] as HTMLElement;
      slide.style.display = 'block';
      this.startIndex++;
    }
  }

2/样式.css

.mall-slide {
    position: absolute;
    top: 155px;
    background-color: #f5f5f5;
    width: 100%;
    height: 430px;
    z-index: -1;
}

.mall-slide .slid-content {
    width: 100%;
    height: 320px !important;
    overflow: hidden;
}

.mall-slide .slid-content .mall-carousel-ind {
    position: absolute;
    top: 290px;
    width: 100%;
    line-height: 0!important;
    text-align: center;
    font-size: 0;
    z-index: 10;
}

.mall-carousel-ind ul {
    display: inline-block;
    padding: 5px;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.mall-carousel-ind li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    font-size: 14px;
    background-color: #e2e2e2;
    background-color: rgba(255, 255, 255, .5);
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}


  .mall-carousel-ind li.mall-this {
      background-color: #fff;    
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      opacity: 1;
      width: 30px;
      border-radius: 14px;
  }

  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

3/ HTML

<div class="mall-slide">
    <div class="slid-content">
        <div class="mall-show-slide fade" *ngFor="let item of Imagedata;">
            <img src="{{item}}" style="width:100%">
        </div>
        <div class="mall-carousel-ind">
            <ul>
                <li *ngFor="let item of Imagedata; let i = index;" [class.mall-this]="startIndex - 1 === i"></li>
            </ul>
        </div>
    </div>
</div>