import {Component,OnInit} from "@angular/core"; @Component({ moduleId: module.id, selector: 'my-app', template: ` <div class="bannerContainer"> <ul class="bannerPicList"> <li [class.active]="currentPic==0"> <img src="assets/img/category01.jpg"/></li> <li [class.active]="currentPic==1"> <img src="assets/img/category02.jpg"/></li> <li [class.active]="currentPic==2"> <img src="assets/img/category03.jpg"/></li> </ul> <ul class="bannerBtnList"> <li><span class="picBtn" (click)="changebanner(0)">●</span></li> <li><span class="picBtn" (click)="changebanner(1)">●</span></li> <li><span class="picBtn" (click)="changebanner(2)">●</span></li> </ul> </div> `, styles: [` .bannerPicList li{ display: none; } .bannerPicList li.active{ display: block; } .bannerContainer .bannerBtnList { position: absolute; top: 360px; left: 116px; } .bannerContainer .bannerBtnList li { float: left; margin: 0 5px; list-style-type:none; } .bannerContainer .bannerBtnList span.picBtn { margin: 20px; height: 10px; width: 10px; background-color: #ddd; display: block; border-radius: 5px; cursor: pointer; } `] }) export class TestComponent implements OnInit { currentPic = 0; constructor() { setInterval(() => { let id = (this.currentPic + 1) % 3; this.currentPic = id; },3000) } changebanner(id) { console.log(id) this.currentPic = id; } ngOnInit() { } }
angular2实现图片轮播
最新推荐文章于 2020-04-25 22:52:50 发布