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="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() { }   }