Angular简易轮播图

最新推荐文章于 2026-05-16 16:20:34 发布

原创最新推荐文章于 2026-05-16 16:20:34 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#typescript

typescript 专栏收录该内容

211 篇文章

订阅专栏

本文介绍了如何在Angular应用中创建一个简易轮播图。通过修改`app.component.css`进行样式设置，`app.component.html`编写HTML结构，以及在`app.component.ts`中编写TypeScript代码实现轮播功能。完成以上步骤并运行成功，实现了一个基本的轮播图组件。

Angular简易轮播图

step1: D:\vue\untitled2905\src\app\app.component.css

.con_img{
  position: relative;
  width: auto;
  height: auto;
}
.ms{
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 41%;
  height: 10%;
  color: white;
  background-color:gray;
  opacity:0.8;
  padding-left: 20px;
  padding-top: 30px;
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
}

.image{
  width:auto;
  height:auto;
}

step2: D:\vue\untitled2905\src\app\app.component.html

<div class="con_img">
  <img class="image" src="{{img}}" id="scenic_img" (click)="getData(img)">
  <span class="ms">{{text}}</span>
</div>

step3: D:\vue\untitled2905\src\app\app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'untitled2905';
  timer: any;
  imgList = [
    {
      icon: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/331282d29e494c75b5fa4e5bbe9d6ea5.jpg',
      text: '推动完善民企债券融资支持机制',
    },
    {
      icon: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/189767452a08421d834d8f004e202f95.jpg',
      text: '出台方案深入推进减税降费工作',
    }, {
      icon: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/5bd4069711074376848ccd524de4f6fb.jpg',
      text: '印发实施意见 改革完善社会救助制度',
    }
  ]; // 图片数组
  img = ''; // 图片路径
  text = ''; // 图片路径
  id = 0; // 默认id 从零开始

  ngOnInit() {
    this.gif();
  }

  gif() {
    // 页面显示 加载默认图片
    this.img = this.imgList[this.id].icon;
    // 设置一个定时器，达到动画切换效果
    this.timer = setInterval(() => {
      // 如果当前图片是最后一张就把id清零 从第一张开始
      if (this.id === this.imgList.length - 1) {
        this.id = 0;
        this.img = this.imgList[this.id].icon;
        this.text = this.imgList[this.id].text;
      } else {
        // 如果当前不是最后一张 就切换下一张
        this.id += 1;
        this.img = this.imgList[this.id].icon;
        this.text = this.imgList[this.id].text;
      }
    }, 1500)
  }

  getData(url:string){
    console.log(url);
  }
}

run,success!

end