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 width: 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 }
