angular2实现图片轮播

html文件：

  
  //图片承载容器
    
 
    
 
    
 
  
  
  //图片底部切换图片的小button承载容器

    
changebanner(0)">
    
changebanner(1)">
    
changebanner(2)">
  

css样式：

.bannerPicList li{
    display: none;
}
.bannerPicList li.active{
    display: block;
}
.bannerContainer .bannerBtnList {
    position: absolute;
    top: 173px;
    left: 116px;
  
}
.bannerContainer .bannerBtnList li {
    float: left;
    margin: 0 5px;
}
.bannerContainer .bannerBtnList span.picBtn {//手动切换图片的小圆按钮
    height: 10px;
    width: 10px;
    background-color: #ddd;
    display: block;
    border-radius: 5px;
    cursor: pointer;
}

js控制图片自动轮播及手动切换：

currentPic=0;
constructor(){
    var that=this;
    setInterval(function(){ // 自动播放，每3秒触发一次单击事件，来播放幻灯片
        var id = (that.currentPic + 1) % 3;
        that.currentPic = id;}, 3000);
}
changebanner(id){
    this.currentPic=id;
}