angular2实现图片轮播

最新推荐文章于 2024-06-12 10:01:05 发布

LUOLUO68

最新推荐文章于 2024-06-12 10:01:05 发布

阅读量1.8k

点赞数

分类专栏： angular 文章标签： angular2 angular 图片轮播

本文链接：https://blog.csdn.net/LUOLUO68/article/details/52116941

版权

angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;
}