写到一半,发现写不下去了,因为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 '@angular/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. } }