angular2实现图片轮播
html文件://图片承载容器 //图片底部切换图片的小button承载容器changebanner(0)">changebanner(1)">changebanner(2)">css样式:.bannerPicList li{display: none;}.bannerPic
·
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; }
更多推荐
已为社区贡献1条内容
所有评论(0)