首页 > 其他 > 详细

(angular)版轮播(半成品)

时间:2021-01-14 11:29:16      阅读:1      评论:0      收藏:0      [点我收藏+]

写到一半,发现写不下去了,因为ng中好像无法直接使用setinterval(),,所以之前 设想的通过更改ul列表的 top 值,来达到自动切换图片的思路行不通了,暂时先记录下来吧。

不过,添加一个按钮,还是可以切换图片的,但这又违背了初衷,,,可能 得等到熟悉了angular中的动画,才会有新思路。

<div id="box">
  <div class="list">
    <ul [style.top]="top">
      <li><img src="../assets/img/01.jpg" width="490" height="170"></li>
      <li><img src="../assets/img/02.jpg" width="490" height="170"></li>
      <li><img src="../assets/img/03.jpg" width="490" height="170"></li>
      <li><img src="../assets/img/04.jpg" width="490" height="170"></li>
      <li><img src="../assets/img/05.jpg" width="490" height="170"></li>
    </ul>
  </div>
  <ul class="count">
    <li *ngFor="let i of [0,1,2,3,4]"

    [class.current]="index == i"
    >
      {{ i + 1 }}
    </li>
  </ul>
</div>
import { Component, OnInit } from [email protected]/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  index:number = 0;
  top:any = 0;
  bOrder:boolean = true;
  timer:any;
  playTimer:any;

  onMouseover(){

  }
  constructor(){

  }
  ngOnInit(): void {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add ‘implements OnInit‘ to the class.

  }


}

 

(angular)版轮播(半成品)

原文:https://www.cnblogs.com/sx00xs/p/14276043.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号