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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!