angular2实现图片轮播

大佬教程收集整理的这篇文章主要介绍了angular2实现图片轮播，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

import {Component,OnInit} from "@angular/core";
 @Component({
     @H_909_2@modulEID: @H_634_16@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() { }
   }

大佬总结

以上是大佬教程为你收集整理的angular2实现图片轮播全部内容，希望文章能够帮你解决angular2实现图片轮播所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。