import {Component,OnInit} from @H_403_11@"@angular/core";
 @Component({
     moduleId: module.id,selector: @H_403_11@'my-app',template: @H_403_11@` @H_403_11@ <div class="bannerContainer"> @H_403_11@ <ul class="bannerPicList"> @H_403_11@ <li [class.active]="currentPic@H_403_11@==0"> <img src="assets/img/category01.jpg"/></li> @H_403_11@ <li [class.active]="currentPic@H_403_11@==1"> <img src="assets/img/category02.jpg"/></li> @H_403_11@ <li [class.active]="currentPic@H_403_11@==2"> <img src="assets/img/category03.jpg"/></li> @H_403_11@ </ul> @H_403_11@ <ul class="bannerBtnList"> @H_403_11@ <li><span class="picBtn" (click)="changebanner@H_403_11@(0)">●</span></li> @H_403_11@ <li><span class="picBtn" (click)="changebanner@H_403_11@(1)">●</span></li> @H_403_11@ <li><span class="picBtn" (click)="changebanner@H_403_11@(2)">●</span></li> @H_403_11@ </ul> @H_403_11@ </div> @H_403_11@ `,styles: [@H_403_11@` @H_403_11@ .bannerPicList li@H_403_11@{ @H_403_11@ display: none; @H_403_11@ } @H_403_11@ .bannerPicList li@H_403_11@.active{ @H_403_11@ display: block; @H_403_11@ } @H_403_11@ .bannerContainer .bannerBtnList { @H_403_11@ position: absolute; @H_403_11@ top: 360px; @H_403_11@ left: 116px; @H_403_11@ @H_403_11@ } @H_403_11@ .bannerContainer .bannerBtnList li@H_403_11@ { @H_403_11@ float: left; @H_403_11@ margin: 0 5px; @H_403_11@ list-style-type:none; @H_403_11@ } @H_403_11@ .bannerContainer .bannerBtnList span@H_403_11@.picBtn { @H_403_11@ margin: 20px; @H_403_11@ height: 10px; @H_403_11@ width: 10px; @H_403_11@ background-color: #ddd; @H_403_11@ display: block; @H_403_11@ border-radius: 5px; @H_403_11@ cursor: pointer; @H_403_11@ } @H_403_11@ `]
})
 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() { }
   }