angular2实现图片轮播

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4     moduleId: module.id,
 5     selector: 'my-app',
 6     template: `
 7     <div class="bannerContainer">
 8       <ul class="bannerPicList"> 
 9         <li [class.active]="currentPic==0"> <img src="app/images/black-hat.jpg"/></li>
10         <li [class.active]="currentPic==1"> <img src="app/images/black-shoes.jpg"/></li>
11         <li [class.active]="currentPic==2"> <img src="app/images/blue-jacket.jpg"/></li>
12       </ul>
13       <ul class="bannerBtnList"> 
14         <li><span class="picBtn" (click)="changebanner(0)">●</span></li>
15         <li><span class="picBtn" (click)="changebanner(1)">●</span></li>
16         <li><span class="picBtn" (click)="changebanner(2)">●</span></li>
17       </ul>
18     </div>
19     `,
20     styles: [`
21         .bannerPicList li{
22             display: none;
23         }
24         .bannerPicList li.active{
25             display: block;
26         }
27         .bannerContainer .bannerBtnList {
28             position: absolute;
29             top: 360px;
30             left: 116px;
31           
32         }
33         .bannerContainer .bannerBtnList li {
34             float: left;
35             margin: 0 5px;
36             list-style-type:none;
37         }
38         .bannerContainer .bannerBtnList span.picBtn {
39             margin: 20px;
40             height: 10px;
41              10px;
42             background-color: #ddd;
43             display: block;
44             border-radius: 5px;
45             cursor: pointer;
46         }
47     `]
48 })
49 export class AppComponent implements OnInit {
50     currentPic = 0;
51     constructor() {
52         setInterval(() => {
53             let id = (this.currentPic + 1) % 3;
54             this.currentPic = id;
55         },3000)
56     }
57 
58     changebanner(id) {
59         console.log(id)
60         this.currentPic = id;
61     }
62     ngOnInit() { }
63 }