html文件:
<div class="bannerContainer">
  <ul class="bannerPicList">  //图片承载容器
    <li [class.active]="currentPic==0"> <img src="img/pre-big.png"/></li>
    <li [class.active]="currentPic==1"> <img src="img/3.jpg"/></li>
    <li [class.active]="currentPic==2"> <img src="img/4.jpg"/></li>
  </ul>
  <ul class="bannerBtnList">  //图片底部切换图片的小button承载容器
    <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>
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;
}



Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐