angular2实现图片轮播

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="app/images/black-hat.jpg"/></li>
        <li [class.active]="currentPic==1"> <img src="app/images/black-shoes.jpg"/></li>
        <li [class.active]="currentPic==2"> <img src="app/images/blue-jacket.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 AppComponent 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() { }
}